Hue, Saturation and Brightness Explained: How to Mix Any Color

The three sliders in On Brand are hue, saturation and brightness, a way of describing color called HSB. With them you can mix any color a screen can show, but only if you know what each one really does. Brightness in particular catches out almost everyone at first, twice over.

A screen makes every color by mixing red, green and blue light, and the numbers for those three are hard to think in. Nobody pictures a burgundy as "mostly red, a dash of blue, almost no green". In 1978 the computer graphics pioneer Alvy Ray Smith described a friendlier set of controls, closer to how painters talk about tint and shade. He called it HSV, for hue, saturation and value; HSB, with brightness for value, is the same model under another name. A close cousin, HSL, appeared the same year (HSL and HSV).

HSB doesn't add any colors. It is just a different set of handles on the same screen colors, and On Brand converts your three settings straight back into the red, green and blue it paints.

Hue is an angle round a color wheel, from 0 to 359 degrees, and it wraps: 359 sits right next to 0. The landmarks:

• 0: red
• 30: orange
• 60: yellow
• 120: green
• 180: cyan
• 240: blue
• 300: magenta

Everything else falls between. On Brand sorts brand colors into families by hue, and its bands are a handy map: red from 345 to 15, orange 15 to 45, yellow 45 to 70, green 70 to 165, teal 165 to 195, blue 195 to 255, purple 255 to 290 and pink 290 to 345. Notice how wide green is and how narrow yellow is. The wheel is spaced by how the screen mixes light, not by how many color names people use.

The hue bar is painted with every hue at full strength, so you can see where you are going.

Saturation runs from 0 to 100 percent and says how much of the hue there is against gray. At 0 there is no hue at all: you get white at full brightness, a mid gray at half, black at none. At 100 the color is as pure as the screen can make it.

Lowering saturation is what turns red into pink, sky blue into a pale powder blue, and a strong brand color into the muted version you see on a faded awning. The saturation bar shows exactly this: it runs from the gray of your current brightness on the left to the full color on the right.

Brightness runs from 0 to 100 percent. At 0 everything is black, whatever the other two say. At 100 the color is as strong as the screen can make it at that hue and saturation. The brightness bar runs from black on the left to your color at full strength on the right.

Here is the part that surprises people: dark colors are mostly just low brightness. Brown is a dark orange. Olive is a dark yellow. Navy is a dark blue, and burgundy is a dark red. Players hunting for brown along the hue slider never find it, because it isn't there. It is on the brightness slider.

The second surprise is that 100 percent brightness does not mean equally light. Measured on CIELAB's lightness scale, from 0 for black to 100 for white, here is how light each landmark looks at full saturation and brightness:

• Blue: about 32
• Red: about 53
• Magenta: about 60
• Green: about 88
• Cyan: about 91
• Yellow: about 97

A full-brightness blue is darker to the eye than a full-brightness red, and far darker than a yellow. So two parts with the same brightness number can look nothing alike in lightness. Judge the result on the logo, not on the number.

If you have used a design tool's HSL picker, there is one more trap. In HSL, lightness at 100 is always white and pure colors sit at 50. In HSB, pure colors sit at brightness 100, and white is saturation 0 with brightness 100.

These are rough starting points, not brand answers. Each is hue, then saturation, then brightness:

• Navy: about 220 to 230, saturation 80 to 100, brightness 30 to 45.
• Brown: about 25 to 35, saturation 60 to 80, brightness 35 to 55.
• Olive: about 55 to 65, saturation 60 to 85, brightness 40 to 55.
• Burgundy: about 340 to 350, saturation 70 to 90, brightness 35 to 50.
• Forest green: about 125 to 140, saturation 60 to 80, brightness 35 to 50.
• Teal: about 175 to 185, saturation 75 to 95, brightness 45 to 60.
• Gold: about 45 to 50, saturation 80 to 100, brightness 85 to 100.
• Coral: about 5 to 15, saturation 55 to 70, brightness 95 to 100.
• Pastel pink: about 340 to 350, saturation 20 to 35, brightness 95 to 100.

Notice that deep colors live at low brightness and pastels at low saturation. That is most of what the two lower sliders are for.

A move on a slider does not cost the same everywhere. Measured with the color-difference formula On Brand scores with, here is what a 10-degree hue slip does to a full-strength color:

• Green: a difference of about 1.2, still 9.9 points.
• Red: about 2.6, 9.7 points.
• Blue: about 6.9, 8.8 points.
• Yellow: about 9.0, 8.3 points.
• Orange: about 12.7, 7.4 points.

In greens the hue has slack. In oranges and yellows a few degrees are worth a point or more. Brightness and saturation vary too: 10 points of brightness on a navy is a difference of about 4.3, and 10 points of saturation on a strong red about 3.5. How On Brand scores a color explains where these numbers come from.

1. Name the family and jump the hue. Decide red, orange, blue or whichever, and move the hue slider straight to its band. In On Brand the part starts at least 60 degrees away from the answer, so this first move is usually a long one.
2. Decide how dark it is and set brightness. Is it a deep color or a bright one? Deep brand colors are usually darker than memory says, so err low.
3. Decide how gray it is and set saturation. Vivid, muted or pastel? Remembered colors tend to be too vivid, so err slightly low here too.
4. Nudge the hue last. With the depth and strength right, ask whether the color leans warm or cool, toward its neighbor on either side, and move the hue a few degrees.
5. Check it against the logo. The other parts keep their real colors. Compare the part with them, then lock.

Each slider's value is shown beside its name as you move it. You can press anywhere on a bar to jump there and drag from it. A focused slider steps one unit with the arrow keys, ten with Shift and an arrow or Page Up and Page Down, and goes to either end with Home and End. With sound on, the sliders tick every 15 degrees of hue and every 5 percent of saturation or brightness, so you can count your way along a bar, and phones that can vibrate buzz lightly at each tick.

On your next round, before you touch a slider, say the three numbers you expect the answer to have: a hue, a saturation and a brightness. Then mix the color, lock it and compare your guess with the Brand readout on the reveal. When your spoken numbers land within a few points of the real ones, you know the model, and the rest is memory. How to get better at On Brand covers that part.