In short
- Hue is the colour's position on the wheel, an angle from 0° to 360°: red at 0°, green near 120°, blue near 240°, back to red.
- Saturation is how much of that hue is present, from 0 per cent (grey) to 100 per cent (the pure colour). Brightness is how light it is, from 0 per cent (black) to 100 per cent.
- Because hue is a circle, the furthest two hues can be apart is 180° — opposite sides of the wheel. Any error larger than that is actually smaller the other way round.
- HSB is for choosing and describing colours by eye; RGB is how screens make them; Lab is for measuring how different two colours look. They answer different questions.
- Rebuilding a colour with three separate sliders exposes which of the three judgements slipped. Picking from swatches cannot.
Three numbers, three questions
Take a colour — a muted teal, say. Asked to describe it, you would not reach for how much red, green and blue light it contains, even though that is what the screen is doing. You would say it is a blue-green, not very strong, somewhat dark. That is HSB: hue, saturation, brightness, in the order a person actually thinks. The model was proposed by Alvy Ray Smith at the end of the 1970s precisely so that people could choose colours in a way that matched how they see them. It is also called HSV, where V is value; the two are the same model.
| Dimension | The question it answers | Range | The ends |
|---|---|---|---|
| Hue | Which colour is it? | 0°–360° | Red at 0°, through yellow, green, cyan, blue and magenta, back to red |
| Saturation | How much of that colour is in it? | 0–100% | 0% is a grey with no hue at all; 100% is the purest version of the hue |
| Brightness | How light is it? | 0–100% | 0% is black regardless of the other two; 100% is as light as the hue can be |
Hue is an angle, and that matters
Hue is laid out on a circle because the spectrum, which runs red to violet in a line, joins up through the purples that do not exist in a rainbow: magenta sits between violet and red and closes the loop. So hue is measured as an angle. Red is 0°, yellow near 60°, green near 120°, cyan near 180°, blue near 240°, magenta near 300°, and 360° is red again.
A circle has a consequence that a line does not: there is a largest possible distance, and it is halfway round. Two hues can never be more than 180° apart. A guess of 350° for a target of 10° is not 340° out; it is 20° out, across the top of the wheel. Any honest hue score has to measure the short way round, and the worst possible hue error is a colour's complement — the hue directly opposite it. This is why Percore normalises hue error over 180°: that is the span from perfect to as wrong as it is possible to be.
Saturation and brightness
Saturation is the amount of hue in the colour. At zero saturation every hue collapses into the same grey, which is why the hue of a very pale or very dusty colour is genuinely hard to name — there is almost no hue in it to see. At full saturation the colour is as vivid as the hue allows. Brightness is simply how light the colour is; at zero brightness everything is black, whatever the hue and saturation say.
The two interact in a way that trips people up. A dark, saturated red and a light, desaturated red can feel like different colours entirely, though they share a hue. In practice, people remembering a colour tend to get the hue roughly right and overstate the saturation — the remembered colour is more vivid than the real one — and brightness errors go either way depending on the surrounding light. These are the patterns to look for in a per-dimension score.
HSB beside the other models
HSB is one of several ways to describe the same colour, and each exists for a reason. Choosing the wrong one for a task is a common source of confusion, so here is what each is for.
| Model | What it is | Best for |
|---|---|---|
| HSB / HSV | Hue as an angle, saturation and brightness as percentages. Brightness 100% is the purest, lightest version of the hue. | Choosing and describing colours by eye; colour pickers; diagnosing a colour-memory error |
| HSL | Same hue; lightness instead of brightness, with 100% lightness always white and 50% the pure hue. | CSS and web design, where lightening a colour towards white is a common operation |
| RGB | How much red, green and blue light, each 0–255. What the screen physically does. | Code, file formats, anything a device has to display; hard to reason about by eye |
| CIELAB (Lab) | Lightness plus two opponent axes (green–red, blue–yellow), built so that equal distances look equally different. | Measuring the difference between two colours (Delta E); print and colour-management work |
A useful way to hold it: RGB is for the machine, HSB and HSL are for the person, and Lab is for the measurement. The colour-perception tools that score with Delta E are measuring in Lab; the ones that give you three sliders are letting you answer in HSB. Both are legitimate, and they tell you different things.
Why three sliders tell you more than a swatch
If you are shown a colour, it disappears, and you pick the nearest of six swatches, the result is one bit of information: right or wrong, with a distance. If instead you rebuild the colour from three separate controls, the result is three numbers — how far off in hue, in saturation, in brightness — and those three numbers are a diagnosis. Someone whose hue error is small and whose saturation error is large every day has learned something about how they see, and can correct for it.
This is the reasoning behind Percore's Colour session, which fills the screen with a colour, hides it, and asks for it back on hue, saturation and brightness sliders. Each error is normalised — hue over 180°, the other two over their full range — and the three are averaged into an accuracy from 0 to 100; the breakdown is shown alongside. The full formula is in How Percore scores, and how to improve your colour perception turns the breakdown into a practice.
Rebuild a colour from the three sliders.
Download on the App StoreFrequently asked
Are HSB and HSV the same thing?
Yes. V stands for value, B for brightness, and they refer to the same model. Different software uses different names; Apple's and Adobe's tools say HSB, many others say HSV.
What is the difference between HSB and HSL?
They share hue. In HSB, 100 per cent brightness is the purest, lightest version of the hue; in HSL, 100 per cent lightness is white and the pure hue sits at 50 per cent. HSL is common in CSS; HSB in design tools.
Why is red at 0° on the hue wheel?
By convention. The wheel has to start somewhere, and red was chosen when the model was defined; the order red, yellow, green, cyan, blue, magenta follows the spectrum with magenta closing the loop.
What is the biggest hue error possible?
180°, the hue directly opposite on the wheel — a colour's complement. Any apparent error larger than that is really smaller measured the other way round, which is why hue error should always be taken the short way.
Which of the three do people get wrong most?
In practice, saturation: people tend to remember a colour as more vivid than it was. Hue is often close, and brightness depends heavily on the surrounding light. A per-dimension score shows your own pattern.