The Vocabulary of Color: Hue, Saturation, Value, Tint, Tone, and Shade
"Make it a bit more saturated." "No, I meant brighter." "Can you tone it down?" Color talk is a minefield of words people use loosely and mean differently - saturation versus chroma, lightness versus brightness, tint versus shade. Get the vocabulary precise and every later topic, from color models to harmony to print, snaps into focus. This is the interactive glossary of the words we use for color.
The three dimensions of color
Any color we can see needs exactly three numbers to pin down - color is a three-dimensional experience. Almost every color word names one of those three axes, or a particular move along one. The three are:
Hue: which color
Hue is the attribute that lets you call a color "red" or "teal" - its position around the color circle, usually given as an angle from 0 to 360 degrees. Hue is what stays the same when you make a color lighter, darker, or more muted: a pink, a brick red, and a maroon are all the same hue family, just at different points on the other two axes. Drag the marker to see where hue names live.
Where the names sit on the circle
A full hue strip from 0° back to 360°, at full chroma. Move the marker and read off the hue angle and the common name for that region - the boundaries are fuzzy and partly cultural (the naming article goes deeper), but the order never changes.
The attribute explorer
The quickest way to feel the three axes is to move each one independently. Below, hue, saturation, and lightness each get a slider; the swatch and the readouts update live. Hold two steady and sweep the third to isolate exactly what that word does.
Move one axis at a time
The HSL controls map directly to the three dimensions: H = hue, S = saturation (vividness), L = lightness. Sweep saturation to 0 and any hue collapses to gray; push lightness to the extremes and every color heads to white or black. The hue itself never changes unless you move H.
Saturation vs chroma vs colorfulness
Here is the distinction that trips up almost everyone. Chroma is colorfulness judged absolutely - how far a color sits from a neutral gray of any kind. Saturation is colorfulness judged relative to the color's own brightness - more like a ratio. Colorfulness is the absolute amount of "hue content" you perceive, which grows with overall light level. The plane below shows, for one hue, every combination of lightness and chroma the gamut allows - click to inspect any point.
The "leaf" of a single hue
For the chosen hue, the canvas plots lightness (vertical) against chroma (horizontal, left = gray, right = most colorful). Colors that fall outside what a screen can show are left dark. Click anywhere to read its lightness, chroma, and the derived saturation - notice that the same chroma gives a higher saturation when the color is darker.
Lightness vs brightness vs value
The light/dark axis has its own trio. Brightness is the absolute amount of light a color seems to send to your eye - a lamp turned up is brighter. Lightness is that judged relative to a similarly-lit white, so it is a perceptual, normalized scale (0 = black, 100 = white). Value is the painter's word for the same light-to-dark position - exactly what you would see if you converted the image to grayscale.
Tints, tones, and shades
Painters have three classic moves that modify a hue without changing it. A tint adds white (lighter, softer). A shade adds black (darker, deeper). A tone adds gray (muted, less colorful). Pick a base hue and watch all three families generate - this is the backbone of building a palette from a single color.
One hue, three ways to vary it
From your chosen base color: the top row mixes progressively more white (tints), the middle row mixes gray (tones), and the bottom row mixes black (shades). The leftmost cell of every row is the pure base. This is how a brand or illustration turns one hero color into a usable range.
A precise glossary
| Word | Means | Absolute or relative |
|---|---|---|
| Hue | Which color family (angle on the wheel) | — |
| Brightness | Absolute amount of perceived light | Absolute |
| Lightness | Brightness relative to a lit white | Relative |
| Value | Artists' light-to-dark position (= lightness) | Relative |
| Colorfulness | Absolute amount of hue content | Absolute |
| Chroma | Colorfulness relative to a lit white | Relative-absolute |
| Saturation | Colorfulness relative to own brightness | Relative |
| Tint | Hue + white | — |
| Tone | Hue + gray | — |
| Shade | Hue + black | — |
Pitfalls and gotchas
Test your understanding
Six questions on hue, saturation, chroma, value, and tint/tone/shade. Instant feedback, no scores recorded - a wrong answer comes with a short explanation.
Quick check
Continue your journey
With the words straight, the models and the theory that use them are far easier to read.
Black, White, and Gray: The Achromatic Colors
What happens at zero chroma - the neutral axis these attributes share.
Foundations · 53Warm and Cool Colors: The Temperature of Color
The felt warm-cool axis that rides on top of these measured attributes.
Digital · HSLHSL, HSV, and HSB: The Cylindrical Color Models
How these attributes become the sliders in your color picker.
Colorimetry · 09CIELAB and LCH Explained
Lightness and chroma defined rigorously and perceptually.
Colorimetry · OklabOklab and Oklch: Modern Perceptual Color Spaces
A better lightness and chroma for everyday design work.
Design · 24Color Theory and Harmony
Putting hues, tints, and tones together into schemes.
Foundations · 45Additive and Subtractive Color Mixing
How adding white, gray, or black actually works in light vs paint.
Foundations · IntroWhat Color Is and How Humans See It
The starting point - what these attributes are attributes of.