How colour works
Stop hunting through swatches. Every colour is three dials you can turn on purpose, and each dial changes a different thing about how the colour behaves on a page.
THE MAIN IDEA
Three dials, not one
Open the colour picker in any design tool and you'll find three sliders, usually called hue, saturation and lightness (some tools say brightness). Together they describe every colour you can pick. The habit worth building: when a colour isn't working, ask which dial, and move only that one.
Sky blue, navy and dusty blue-grey can all be the same hue. What separates them is how much lightness and how much saturation each one has.
Hue
The name of the colour: red, orange, yellow, green, blue, violet. Tools measure it in degrees around a circle, from 0 to 360, because the colours loop back to the start. Changing hue changes which colour you have, not how strong or how pale it is.
Red sits near 0, yellow near 60, green near 120, blue near 210. Colours on opposite sides of the circle, such as blue and orange, are the ones that feel most different from each other.
Check yourself
Negar's poster uses her brand green for the text and a lighter version of the same green behind it. The text is hard to read. She doesn't want to change the colour family. Which dial should she move?
- Hue, until the text is a completely different colour
- Lightness, so the text is much darker than the background
- Saturation, so the text green is duller
- None of them; she should add a shadow behind the text
Show the answer
Lightness, so the text is much darker than the background
Yes. Readability lives mostly on the lightness dial. Keeping the hue and pushing the text much darker gives her the brand colour and a readable page.
Saturation
How much of the colour is actually there, from 0 to 100. At 100 it is as pure and vivid as the screen can make it. At 0 it has no colour left at all and you get grey. Lowering saturation is how you get the calm, grown-up colours that look expensive: sage, sand, dusty rose, slate.
Highlighter yellow is a hue near 60 at very high saturation. Pull the saturation down and the same hue becomes a soft wheat colour you could put behind a whole page of text.
Lightness
How close the colour is to white or to black, from 0 to 100. At 100 you get white, at 0 black, whatever the other two dials say. This is the dial that decides whether text can be read, because the eye separates light from dark far more sharply than it separates one hue from another.
Take one hue and make three versions: lightness 95 for a page background, 50 for a button, 20 for text. Three roles, one colour, and they can't be confused with each other.
One colour, one dial moved at a time
hue saturation lightness what you get
210 80 50 a strong mid blue
210 80 92 a pale blue, fine behind text
210 15 50 a dusty blue-grey, nearly a neutral
210 80 20 a deep navy, good for text
30 80 50 same strength, opposite side of the wheelRows 1 to 4 are one colour family doing four different jobs.
Only row 5 is a different colour.Every design tool has these three sliders somewhere, sometimes labelled HSB or HSL. Move one at a time and watch what changes.
Check yourself
Which dial was moved?
- A red logo becomes orange
- A vivid pink becomes a soft dusty pink
- Black text becomes mid-grey
- A warm yellow becomes a cool blue
- The same blue is made much paler for a background
- A bright grass green becomes a grey-green
Show the answer
Hue: A red logo becomes orange, A warm yellow becomes a cool blue
Saturation: A vivid pink becomes a soft dusty pink, A bright grass green becomes a grey-green
Lightness: Black text becomes mid-grey, The same blue is made much paler for a background
Warm and cool
Warm: reds, oranges, yellows
Feel active, close and loud. They tend to come forward, so a warm element looks nearer than a cool one at the same size. Good for the one thing that must be noticed: a sale price, a button, a warning. Used everywhere, they exhaust the eye.
Cool: blues, greens, violets
Feel calm, steady and further away. They sit back, which is why so many banks, clinics and software products are blue. Good for backgrounds, large areas and long text. Used alone, they can feel cold and forgettable.
Check yourself
A warm colour can still make a page feel calm: a soft sand beige is a warm hue and a quiet one at the same time.
Show the answer
True
True, and it catches most beginners out. Hue is only one of the three dials. Red and orange feel loud mostly when their saturation is high; turn saturation down and the same warm hue becomes a quiet background. Pick the mood with the dial, not only with the colour family.
Check yourself
Match each job to the dial settings that suit it
Show the answer
- A sale banner that has to shout → Warm hue, high saturation
- A tint behind a page of body text → Very high lightness, low saturation
- The cover of a calm annual report → Cool hue, moderate saturation
- Text that must be easy to read on white → Low lightness, any hue
Check yourself
Omid's booking page shows a green tag on rooms that are already taken, because green is his brand colour, and a red tag on rooms that are free. Guests keep booking the wrong rooms. What is the main problem?
- Green usually reads as available and red as taken, so the tags are backwards
- Green and red sit on opposite sides of the wheel, so they clash too much to be read quickly
- Brand colours should never appear in an interface, only in marketing
- The tags should have higher saturation so guests notice them
Show the answer
Green usually reads as available and red as taken, so the tags are backwards
Right. He is fighting a convention his guests already carry in their heads, and the brand colour isn't worth that. Swap the meanings, and put the words 'free' and 'taken' on the tags so colour isn't doing the job alone.
Lesson recap
- A colour is three dials: hue (which colour), saturation (how pure), lightness (how near white or black).
- When a colour isn't working, name the dial and move only that one.
- Lightness is the dial that decides readability. Low saturation is what makes colours look calm and grown-up.
- Warm hues come forward and shout; cool hues sit back and calm down.
- Colour meaning is learned and varies by place, so always say it in words too. Check your design in greyscale.