What colour is made of: hue, saturation and brightness

Every colour can be described by three things: which colour it is (its hue), how light or dark it is, and how much colour it holds. That idea is more than 120 years old, and it still sits in today's international colour standard. Now, the hue, saturation and brightness sliders in your design app borrowed those names. They don't actually measure those three things.

What are the three dimensions of colour?

Back in 1905 the painter Albert Munsell set them out and called them hue, value and chroma. His definitions still work today. Hue is how you tell one colour family from another, so red from yellow from blue-green. Value is how you tell a light colour from a dark one. And chroma is how you tell a strong colour from a weak one, from vivid all the way down to grey. Today we'd call them hue, lightness and colourfulness, and they cover the same three dimensions.

Munsell also explained why you need all three. If you tell someone a room is 22 feet wide and 14 feet high, they still can't picture it, because the length could be 25 feet or 100. A colour described by only two of its three dimensions has the same gap in it.

The international standard for colour terms, which the International Commission on Illumination (the CIE) published in 2020, still describes colour with those same three dimensions. And the reason it's three is your eye. You have three kinds of colour-sensing cells, so three numbers are enough to pin down any colour you can see.

Brightness and lightness are not the same thing

They sound like the same thing, but the colour standard treats them as two separate qualities. Brightness is how much light seems to come off something. Lightness is how light it looks compared with a white in the same light.

Say you carry a sheet of white paper from a sunny window into a dim hallway. Far less light reaches your eye from it now, so its brightness has dropped a long way. But you don't think the paper has turned grey. It still looks white. That steady "still white" judgement is lightness.

Design apps use the two words as if you could swap one for the other. One app's third slider says brightness, another app's says lightness, and neither slider measures what the standard means by either word. The word on the slider is a label, not a measurement.

Saturation, chroma and colourfulness: what's the difference?

All three words describe how much colour there is. Where they differ is in what they measure that amount against. Colourfulness is the raw amount of colour you see. Chroma is that amount judged against a white in the same light. And saturation is that amount judged against how bright the colour itself is.

In other words, it's the same colour each time, just measured against a different yardstick. The standard needs three words for how much colour there is, and your app gives you one slider to do all three jobs.

Worth knowing: the CIE standard actually uses six terms to cover colour's three dimensions. Hue stands on its own. The second dimension is brightness or lightness. The third is colourfulness, chroma or saturation. Brightness and colourfulness describe the light reaching your eye, whereas lightness and chroma describe the colour of the object itself. Apps borrow these words loosely, and that's why the labels never quite line up.

Where the sliders came from

The sliders started with a 1978 paper by Alvy Ray Smith. He was a computer graphics pioneer, and he wanted a way to pick colours on a screen that felt like painting, rather than typing in amounts of red, green and blue light. His goal, in his own words, was "modeling the artist's method of mixing": choose a pigment, then add white, black or grey. (That painter's habit has its own article on tints, tones and shades.)

The thing is, Smith's paper doesn't mention Munsell, or any other system built on how people see colour. The names were handy labels, not measurements. His model reached designers through PostScript, where it was renamed HSB. A close cousin, HSL, arrived with Windows.

By 1996 Smith was saying so himself. Writing with Eric Ray Lyons, he described HSB, HSL and a newer model as "not perception-based models, despite the perception-based names of their dimensions". The names on the sliders come from how we see colour, but the maths behind them doesn't.

Why does moving one slider change the other two?

Because the three sliders were never independent. All three do sums on the same three numbers underneath, which are the red, green and blue values of a screen pixel. That's why moving one slider shifts the other qualities too. It's a bit like an old shower with separate hot and cold taps: open the hot tap to warm up and the pressure changes as well, because both taps feed the same pipe.

I measured what each slider does to the qualities it isn't named after. Lightness here is on a scale of 0 (black) to 100 (white).

The saturation slider is the one that drives people mad. On blue it works as a lightness control, and a strong one, moving a quarter of the whole scale. On yellow it hardly touches lightness at all. It's the same slider and the same drag, but you get a different result depending on where you started. Smith named this flaw back in 1996, when he wrote that the meaning of the saturation control drifts as the third slider moves.

And people really do get frustrated by it. A designer asked in Adobe's Illustrator forum why her sliders no longer worked independently, and she was told to reset her preferences. Nothing was broken, though, so resetting was never going to fix it.

The brightness slider has the same problem. A yellow and a blue set to the same brightness look nothing like equally bright, and that one gets its own article.

Does 100% saturation mean the same amount of colour for every hue?

No, it doesn't. On your slider, 100% saturation means "as much colour as this hue can manage on screen", not a fixed amount. I set twelve hues around the wheel to 100% saturation and 100% brightness, and then measured how much colour each one really had. Cyan came last, and by a wide margin. It carries less than half the colour of the strongest hue.

Two colours that both say 100% have each reached the top of their own range. The 100% tells you nothing about which one holds more colour.

The hue dial isn't evenly spaced

Every step on the dial looks the same size, but the colour change behind each step isn't. I stepped the dial 30 degrees at a time around the whole wheel and measured how far the actual hue moved. The smallest step moved it about 7 degrees, and the biggest moved it about 61, which makes the widest step at least nine times the narrowest.

Through the greens you can turn the dial a long way and barely see a change. But just past cyan, heading towards blue, one small nudge changes everything. The dial looks regular, and that's exactly why it's hard to work by numbers. If you're adjusting a colour near blue, use much smaller nudges than you would in the greens.

A side note: most of the dial goes dead at low saturation. The hue dial has 360 positions, but at low saturation most of them do nothing. At 50% brightness and 5% saturation, only 42 of the 360 settings give you a different colour on screen. At 2% saturation, only 18 do. The numbers look precise, but the colour you get isn't.

What should you do differently in your next design?

Use the three dimensions as your language, and treat the sliders as one way to get there.

1. Name the quality before you touch a slider. Is it the wrong colour, is it too light or too dark, or is it too strong? Decide that first, and then reach for a control.
2. If a colour feels like too much, try lightness first. A colour that shouts is often too light or too dark for its job, rather than too saturated. That's my rule of thumb, not a law of physics, but it's worth trying before you drain the colour out.
3. Don't trust matching numbers. Two colours with the same saturation and brightness can look nothing alike in strength or lightness. Put them side by side and look.
4. Copy hex codes, not slider numbers. HSB and HSL give the same colour different numbers, so a value copied from one into the other lands on a different colour.
5. When the numbers and your eye disagree, trust your eye. The sliders will get you close every time, but they can't tell you whether the colour looks right.

Frequently asked questions

Why does changing one slider in my design app change the others?

Because the hue, saturation and brightness sliders were never independent. All three are sums worked out from the same red, green and blue values, so moving one shifts the others. Alvy Ray Smith, who invented them, noted in 1996 that the meaning of the saturation control drifts as the third slider moves. In one test, dropping saturation from 100% to 50% on pure blue made it look about 27 points lighter on a 0 to 100 scale.

What is the difference between brightness and lightness?

Brightness is how much light seems to come from something, whereas lightness is how light it looks compared with a white in the same conditions. Carry white paper from sunlight into a dim room and its brightness falls a long way, but it still looks white. Its lightness holds steady. The international colour standard (CIE S 017:2020) defines them as separate terms, even though design apps often swap the words.

Why do two apps show different numbers for the same colour?

Usually it's because they use different colour models. HSB and HSL describe the same colour with different numbers by design. Pure red is 100% brightness in HSB but 50% lightness in HSL. A muted blue-grey, hex #80949B, reads 17.4% saturation in HSB and 11.9% in HSL. When you move a colour between apps, copy the hex code rather than the slider values.

Does 100% saturation mean the same amount of colour for every hue?

No. At 100% saturation and 100% brightness in the HSB model, each hue shows as much colour as it can reach on a standard screen, and that ceiling is different from hue to hue. Measured across twelve hues around the colour wheel, cyan carries less than half the colour of the strongest hue. The slider shows a share of each hue's own maximum, not a fixed amount of colour.

For the curious

The standard is CIE S 017:2020, the International Lighting Vocabulary. Its entry for perceived colour names three attributes, with six terms between them. Munsell's hue, value and chroma map onto the same three, and the reason there are three is trichromacy: three cone types, peaking near 440, 545 and 565 nanometres.

The sliders are the HSV model (sold to designers as HSB), from Smith's 1978 SIGGRAPH paper. HSL appeared around the same time. Its original author is disputed, so I don't name one. Charles Poynton's 1997 Color FAQ reached the same verdict years ago: "HSB and HLS should be abandoned".

My measurements use sRGB, a D65 white and Python's standard colorsys module. Lightness and chroma were measured in CIELAB and then checked again in Oklab, and every conclusion holds in both. Where the numbers differ, I quote the smaller one: the hue-step gap is 9× in Oklab and 16× in CIELAB, and the two spaces disagree on which hue is most colourful, so I only name the weakest.

There's one honest complication, which comes from David Briggs. Three attributes are enough within one way of seeing colour, such as a colour on a screen. But describing an object and the light falling on it takes more.

Sources (7)

• CIE, perceived colour, term 17-22-040 (opens in a new tab), CIE S 017:2020
• Albert H. Munsell, A Color Notation (opens in a new tab) (1905; 1907 edition)
• Alvy Ray Smith, "Color Gamut Transform Pairs" (opens in a new tab), Computer Graphics 12(3), 1978
• Alvy Ray Smith and Eric Ray Lyons, "HWB: A More Intuitive Hue-Based Color Model" (opens in a new tab), Journal of Graphics Tools 1(1), 1996
• David Briggs, "The Elements of Colour" (opens in a new tab)
• Michael Kalloniatis and Charles Luu, "The Perception of Color" (opens in a new tab), Webvision
• Charles Poynton, Color FAQ (1997)