Describing a color in three words: hue, saturation, value

Short answer

Every color can be described by answering three questions: which color family it belongs to (hue), how vivid or muted it is (saturation), and how light or dark it is (value). These three dimensions are independent of each other; two colors can share the same hue and still differ completely in value or saturation. In design and painting, the most overlooked but hardest-working dimension is value; turning an image into black and white is the easiest way to see it with the naked eye.

Hue: the color's family

When you ask someone "What color is this?", the first answer you usually get is the hue: red, orange, yellow, green, blue, purple. Hue tells you which of these families a color resembles. If you picture a color wheel, hue is where you're standing around its circumference.

The International Commission on Illumination defines hue exactly this way: the attribute of a visual perception that makes an area appear similar to one of the colors red, yellow, green, and blue, or to a combination of two of them. What stands out in this definition is that hue is defined as a perceptual attribute, not as a wavelength. In fact, there are hues with no counterpart in the spectrum — magenta is the best-known example, and BI-02 covers it.

White, gray, and black have no hue. These colors are called achromatic, and DT-06 covers them separately. A practical way to understand a color's hue is to pull it away from gray: whichever family the gray shifts toward once you add a bit of color, that's the hue. There are borderline cases where everyday language struggles to name a hue: does turquoise belong to blue or to green, is maroon red or purple? These border zones are a reminder that hue is a continuous wheel, while language cuts it into pieces.

Saturation: how colorful a color is

The second question is the color's intensity. A pair of newly bought jeans in dark, vivid blue and the same jeans faded to a grayish blue after hundreds of washes share the same hue; what differs is saturation. A saturated color looks pure and intense, while a color low in saturation moves closer to gray.

In everyday language, saturation, vividness, and purity are used interchangeably. In color science, though, there's a fine distinction: chroma judges a color's colorfulness against a white surface, while saturation judges it against the color's own lightness. The numerical counterpart of this distinction belongs to more advanced lessons; what matters here is that the "vividness" dimension is separate from hue and from value. You can keep a color's hue and value unchanged and lower its saturation; this is how designers get the hues they call "broken," covered in DT-07.

The perception of saturation is also shaped by its surroundings. A medium-saturation color on a muted background looks vivid; the same color surrounded by highly saturated colors looks dull. That's why, when judging a palette, you need to see the colors together, in the place they'll actually sit, not one at a time.

Value: lightness and darkness

The third question is where a color sits between black and white. Painters and designers call this value; color scientists call it lightness. Navy and baby blue can share the same hue; the biggest difference between them is value. The same goes for maroon and pink, which sit at opposite ends of the red family.

Value is the sneakiest of the three dimensions, because different hues have different natural values. Yellow at its most saturated is far lighter than blue at its most saturated. That's why two saturated colors side by side, like red text on green, can look very different from each other and still be hard to read if their values are close; the eye reads detail, shape, and depth largely from value differences, and color is a layer added on top of that reading.

This is why an old habit of painters works: squinting at a scene or a canvas. When your eyes are squinted, details and colors blur and what's left are the large light and dark masses. If a painting's composition is solid, these masses still read clearly; if it's weak, everything collapses into a single middling tone. The same habit can be used when looking at a presentation slide, a product package, or a web page.

One of the first people to bring these three dimensions together into a consistent, measurable system was the American painter and educator Albert Munsell. In a book published in 1905, he defined colors along three independent axes: hue, value, and chroma. DT-14 teaches how to read and write Munsell's system; this lesson's only goal is to establish the vocabulary.

The black-and-white photo test

Value is hard to see, because the eye gets pulled in by the appeal of hue and saturation. The easiest fix is to remove color altogether. Photograph a painting, a poster, or an interface with your phone and convert it to black and white. What's left shows only the values: where is there a strong light-dark difference, and where does everything blur into the same gray?

This test answers several questions quickly. Is there enough difference between a heading and its background? Is the important element the lightest or darkest spot in the image, or does it get lost in the crowd? Does a face separate from the background in a photo? A palette that looks vivid in color but collapses into a single gray smudge in black and white usually has a readability problem. The numerical measure of readable text colors is covered in UX-06, and building visual hierarchy with color is covered in GT-03.

Example — the same hue, different faces

Human skin is a surprisingly good example for understanding these three dimensions. Even though different people's skin colors look very different, color measurements show their hues stay within a relatively narrow range, in the orangish zone between red and yellow. Most of what separates one skin tone from another lies in value — lightness and darkness — and to a lesser extent in saturation.

This matters in practice. A portrait photographer or a cosmetics designer who classifies skin only as light or dark misses the differences in saturation and undertone; one who looks only at hue misses the biggest difference, which is value. How skin-tone scales are built in cosmetics is covered in MT-08, and capturing different skin tones accurately on camera is the subject of FS-11.

Common misconception

Summary

1. Every color is described by three independent dimensions: hue (color family), saturation (vividness), and value (lightness-darkness).
2. Value is the dimension that most determines readability and hierarchy in design; the black-and-white photo test makes it visible.
3. Human skin tones stay within a relatively narrow hue range; most of the difference lies in value, which is why classifying skin by a single dimension falls short.

Test yourself

1. (Easy) Which dimension tells you which color family a color belongs to?
2. (Easy) Which dimension does a pair of faded jeans differ in most from a new pair?
3. (Medium) Can two colors share the same hue but differ in value?
4. (Medium) What problems does converting a poster to black and white reveal?
5. (Hard) Explain, using all three dimensions, why green text on a red background can be hard to read even though the two colors look very different.
6. (Hard) What does classifying skin tones only as "light" and "dark" miss, and what does looking only at hue miss?

Answers

1. Hue; it tells you which family a color resembles — red, yellow, green, blue ("Hue: the color's family").
2. Saturation; faded fabric keeps the same hue but moves closer to gray ("Saturation: how colorful a color is").
3. Yes. Navy and light blue, maroon and pink, share the same hue; the difference between them lies in lightness and darkness, that is, value. The three dimensions are independent of each other ("Value: lightness and darkness").
4. It shows whether there's enough light-dark difference between a heading and its background, whether the important element stands out, and whether elements that look different in color collapse into the same gray ("The black-and-white photo test").
5. Red and green have very different hues, but their values can be close to each other; because the eye reads detail and letterforms largely from value differences, the text becomes hard to read. For people with color vision deficiency, the hue difference can disappear too ("Value: lightness and darkness", "Common misconception").
6. Classifying by light and dark alone misses the differences in saturation and undertone; looking only at hue misses the biggest difference between skin tones, which is value ("Example — the same hue, different faces").

Sources

• CIE S 017:2020, International Lighting Vocabulary, "hue," "lightness," "saturation," "chroma" entries.
• Munsell, A. H., A Color Notation, Boston, 1905 (Project Gutenberg).
• Xiao, K. et al., "Characterising the variations in ethnic skin colours: a new calibrated data base for human skin," Skin Research and Technology, 2017.

Next step

DT-02 carries this vocabulary into mixing: it explains why mixing light produces white while mixing paint produces brown, separating additive and subtractive mixing from average mixing. EK-02 moves the same three dimensions to their numerical counterparts on screen: it covers RGB, HSL, HSV, and hex codes, and shows why the "lightness" value in HSL doesn't match what the eye actually sees as value.