Seeing Colour
Before you can choose a colour, you have to learn to read one.
Most people see one thing — “blue” — and dive into a colour picker hoping to fish out the right one. Designers see three things at once: a colour’s hue, its value, and its saturation. Three separate dials, each answering a different question.
Hold them apart and colour stops being a guessing game. From then on you reason about it two ways at once — with your eye (does it feel right) and with the numbers (can you prove it). This module builds that double vision, and you feel every idea in the labs below.
- Break any colour into its three dimensions — hue, value, saturation.
- Diagnose “what’s wrong” with a colour as one specific dial, not a vague feeling.
- Use the greyscale test to prove whether value is carrying your layout.
- Read the colour numbers — and know why OKLCH is quietly replacing HSL.
Every colour is three numbers
Hue is the colour’s name — its place on the wheel, red through violet. Value is how light or dark it is, from near-white to near-black. Saturation is how vivid or grey it is, from a pure electric tone down to a flat neutral.
That’s the entire alphabet of colour. A picker hides it behind a square of swatches; the explorer below puts the three dials in your hands and shows the colour in a real interface as you turn them — the feel and the numbers, side by side.
Prove it in greyscale
Here’s the secret the eye already knows: it reads value — lightness — long before it reads hue. So value, not colour, carries readability, depth, and hierarchy. A layout with right values survives in pure greyscale; one leaning on colour to do value’s job collapses the moment the colour is gone.
Strip the panel below to value. Two of these buttons hold their ground; one nearly disappears into its row. That vanishing button is a colour-only signal — invisible to a colour-blind user, or anyone on a washed-out screen in the sun.
Why OKLCH is winning
The old hsl() numbers lie a little: a yellow and a blue at the same “lightness” look nothing alike in brightness. The modern OKLCH space fixes that — it’s perceptually uniform, so equal steps in the number land as equal steps to the eye.
You don’t need the maths; you need to see it. Below is one hue stepped in equal lightness jumps, twice — once in HSL, once in OKLCH. Watch how the first ramp lurches and the second glides.
One discipline that changes everything
Three dimensions, learned. But the leap from “knows the words” to “controls colour” is a single habit.
Value first. Colour second. Always.
The mistake every beginner makes is to pick by hue — “I want a blue brand” — and then fight the layout because the values are wrong. Reverse it. Design the whole thing in greyscale until the value structure reads: the headline darkest, the body a step lighter, the one button darkest-or-brightest of all. Only then pour the hue in.
Saturation is the loudest dial, so it’s the one to spend, not splash. A mature palette is mostly muted, low-saturation tones with a single near-pure accent reserved for the one thing that must be seen. The eye reads that lone vivid spot as “here” precisely because everything around it is calm. Turn every colour up and you’ve turned the volume to a flat, exhausting roar — the visual equivalent of a page where every word is bold.
So the working order is fixed: value builds the structure, hue sets the mood, saturation points the finger. Get that sequence right and colour stops fighting you — it starts doing exactly what you ask.
When the wrong dial broke it
Three teams thought they had a colour problem. Each was really a value problem. Hit greyscale test on any card to strip the hue and see what the eye was actually struggling with.
The alerts nobody saw
A dashboard’s error-red and all-clear-green sat at the same value, so warnings vanished in peripheral vision. Raising the error’s value — not just its hue — made failures jump out. Missed-incident reports dropped sharply.
The invisible button
A brand-blue “Buy” button on a blue-tinted page was the same value as its background and simply disappeared. Shifting it to a high-value warm accent made it the one clear focal point. Checkout clicks climbed.
The chart that was mud
A six-series chart used six fully-saturated hues; colour-blind readers saw one brown smear. A value-stepped single-hue scale made every line separable — even in greyscale. Everyone could finally read it.
One hue, a whole family
The same idea, in the wild: one hue stretched across values to build a system, and a muted base that spends saturation just once.
Three bars, one blue hue at three values. The hue never moves; only lightness does — and instantly reads as “most to least”.
Three desaturated greys, then a single vivid amber. Full saturation, used exactly once, is what reads as deliberate and professional.
These three dimensions are the ground the whole series stands on. Harmony is built by moving hue while holding value and saturation steady; accessibility is fixed by moving value until the contrast number passes; systems generate tonal scales by stepping value and chroma. You can’t build, balance, or check a palette until you can see which of the three dials each problem lives on.
The Seeing glossary
Six words that turn “that colour’s off” into a precise fix. Tap a card to flip it.
Questions you actually ask
Read the colour
Ten questions in seven formats, tagged by thinking level — each with layered hints: a nudge, the reasoning, then a deeper connection. A wrong answer opens a door, never a dead end. Served from the question bank, never hardcoded.