Using Colour
Bad colour is rarely the colour. It is where you sent the eye.
You know the three dials now, and you know value carries the structure. This module is the next question — not “what colour looks nice” but what must the eye notice first. Used well, colour isn’t decoration. It’s a pointing finger.
And the finger only works if it’s rare. In the labs below you’ll watch a calm field of colour collapse into a shouting match, see one colour turn into four just by changing its background, and feel a palette flip from premium to alarming without a single hue changing — only its amount.
- See why attention comes from rarity, not brightness — and watch it break when colour is overspent.
- Predict how a colour will shift against different backgrounds (relativity), so your accent still reads.
- Use proportion as the real control — the same hue means opposite things at 8% and 50%.
- Repair a noisy screen fast, by removing colour until one thing can win.
Watch the colours collide
Attention isn’t created by a colour being bright. It’s created by a colour being rare. One saturated shape on a calm, muted field reads instantly as “here” — not because of the shape, but because everything around it is quiet.
Below, eight shapes start hushed, near-grey. Turn them up one by one. Feel the exact moment the single clear voice becomes a room where everyone is shouting a different colour — and no one is heard.
One colour, four colours
Here is the fact that undoes most “my accent doesn’t pop” problems: a colour has no fixed appearance. It borrows from whatever sits behind it. The same swatch looks warmer, cooler, lighter or duller depending only on its background — the hex never moves.
The four chips below are identical. Read the hex under them, then look again. On the deep teal they almost glow; on the warm cream they sink; on black they lift. Try a different accent and watch the effect change.
The same hue, premium to alarming
Two designs can use the exact same colours and feel like opposites. The difference is almost never the palette — it’s how much of each colour is on screen. A sliver of a hue reads as deliberate and expensive; a wall of it reads as a warning.
Drag the accent from a whisper to a flood. Nothing about the colour changes — only its share — and watch the feeling swing from calm confidence to alarm.
One question that orders everything
You can know every rule above and still make a loud page. The fix is a single question, asked before any colour goes down.
Don’t ask what looks nice. Ask what must be noticed first.
Beginners choose colour by taste — “I like this blue” — and paint it wherever it fits. Reverse the order. Start from the job: on this screen, what is the one thing the eye must find first? That element earns the accent. The runner-up earns emphasis through value or weight, not a second vivid hue — because, as the collision lab showed, two saturated colours don’t rank, they fight.
This is why “more colour” never makes a design richer. Attention is a fixed budget; every extra vivid element spends from the same pot, and past a couple of marks the page goes bankrupt — loud, tiring, leaderless. And remember relativity: an accent only pops against a calm ground, so the neutrals aren’t filler, they’re what funds the accent.
So the working order is fixed: rank the content, spend the accent once, let the neutrals hold the rest, and watch the proportion. Get that sequence right and a plain palette will out-perform a beautiful one used everywhere.
Repair this dashboard
Here is a real failure: four cards in four hues and three call-to-actions all shouting. Nothing leads. Walk the repair — and notice the fix is removing colour until one thing can win, not adding more.
Which reads better?
Five face-offs. Same content, two colour treatments — one applies a rule from this module, one breaks it. Pick the one that leads the eye, then see the verdict. This trains your judgment, not just your recall.
When too much colour broke it
Three teams thought they needed a better palette. Each really needed less of it. Hit greyscale test to strip the hue and see how little the colour was actually doing.
The rainbow toolbar
A toolbar coloured every icon a different bright hue “for clarity”. Users found nothing. Greying all but the primary action — one amber icon on neutral — cut task time sharply. Colour wasn’t clarity; scarcity was.
The equal-weight hero
A landing page gave its headline, image and CTA equally saturated colour. Visitors read nothing in order. Pulling headline and image back to neutral and leaving one warm CTA lifted click-through by a third.
The badge storm
A pricing page wrapped every plan in a coloured “best value” badge. When all three shouted, none persuaded. One accent badge on the recommended plan — the rest neutral — doubled its selection rate.
Calm and loud, same palette
The identical set of colours, used two ways. On the left, one accent on a neutral screen — the eye lands where the product wants. On the right, the same hues at equal share — a wall with no way in.
Neutral text and surface, a single warm button. Restraint is what makes the one colour feel deliberate — and clickable.
Same hues, spread evenly. With everything shouting, the button that mattered is just one more voice in the crowd.
Attention is the bridge between seeing colour and building with it. Value (Module 2) sets the structure this accent sits on; a palette (next) is just roles — base, neutral, accent — assigned by exactly the scarcity and relativity logic you just felt; and a colour system encodes it as tokens so one accent stays one accent across a hundred screens. Learn to spend attention here, and every later module is placement.
The Using glossary
Six words that turn “it feels busy” into a precise fix. Tap a card to flip it.
Questions you actually ask
What people get wrong
Read the attention
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.