Building a Palette
A palette is not five nice colours. It is five jobs, clearly assigned.
You can see colour, use it for attention, and read it against its ground. Now you build the set you’ll actually design with. And the beginner’s mistake is to collect colours they like — five pretty swatches that have never met — instead of choosing a structure and giving every colour a role.
Three moves make a palette: pick a harmony so the colours are related, assign each a job so the eye knows what leads, and balance the proportions so it reads calm. You’ll build all three on live colour below.
- Start from a harmony — complementary, analogous, triadic, split — instead of picking colours at random.
- Assign every colour a role: base, surface, text, accent — and know why the same colour can be right or wrong.
- Balance a palette with the 60-30-10 instinct so it reads deliberate, not busy.
- Repair a clashing five-colour mess into one coherent, working palette.
Colours that agree
Related colours don’t come from taste; they come from geometry. Fix one base hue and the wheel tells you which others belong with it — opposite for contrast, neighbours for calm, evenly spaced for energy. That relationship is what makes a set feel like a palette instead of a pile.
Spin the base hue and switch the scheme. Watch the partner colours move on the wheel, drop into swatches, and fill a real card — harmony you can see, not memorise.
Pick the role, not the colour
Here is the sentence to keep: a palette is jobs, not swatches. Base, surface, text, accent — each is a role, and a colour is only “good” or “bad” relative to the job you give it. A vivid orange is perfect as an accent and a disaster as a page base; a pale grey is a fine surface and unreadable as text.
Cast the four colours below into the four roles and watch the card rebuild. Try putting the vivid one on the base, or the pale one on the text — the card will tell you off.
The 60-30-10 instinct
Even a harmonious, well-cast palette fails if the amounts are wrong. The old studio rule of thumb — roughly 60% base, 30% secondary, 10% accent — isn’t a law, it’s a reminder that most of a design should be calm and only a sliver should shout.
Drag the two handles and read the split. Find the zone where the bar stops looking like three competing blocks and starts looking like a system — the badge lights when you’re in 60-30-10 territory.
The habit that makes palettes work
Harmony, roles, proportion — one working habit ties them together and separates a palette that survives contact with a real screen from one that doesn’t.
Build in roles, not favourites.
The trap is falling for a colour — “this teal is gorgeous” — and then hunting for a design that fits it. Reverse it. Decide the jobs first: I need a calm base, a quiet surface, a readable text, and one accent that leads. Then choose colours to fill those jobs, drawn from a single harmony so they already agree.
Do it in that order and the hard problems solve themselves. Contrast is handled because text was chosen dark against a light base. Loudness is handled because only one role — the accent — is allowed to be vivid. Cohesion is handled because every colour came from the same wheel relationship. A palette isn’t a mood board; it’s a cast list, and the same colour can be the hero on one screen and an extra on the next.
So: harmony gives you colours that belong, roles tell each one what to do, and proportion keeps the loud one rare. Five colours, five jobs — that’s a palette.
Repair this palette
A real starting point: five colours someone liked, with no relationship and no roles. Walk it into shape — keep a harmony, assign the jobs, and let one accent lead.
Which palette is built better?
Five face-offs. Two palettes doing the same job — one built on a rule from this module, one thrown together. Pick the stronger, then see the verdict.
When the palette was the bug
Three teams blamed their layout. Each had a palette problem — no harmony, no roles, no balance. Hit greyscale test to see the structure underneath the colour.
The five favourites
A brand deck had five saturated colours nobody could relate. Rebuilt as one triadic harmony with a neutral base, the same product suddenly looked designed. Nothing about the layout changed — only the relationships.
The no-neutral palette
An app used three brand colours and no neutral, so every surface competed. Adding a calm grey family for base and text — brand colour kept only for actions — made the whole product legible overnight.
The even split
A dashboard gave six chart series six equal, fully-saturated slices — a spinning wheel of noise. A single-hue value scale with one accent for the key series made it readable at a glance, even in greyscale.
One palette, three surfaces
A palette isn’t proven on one card. The same four roles — calm base, quiet surface, dark text, one amber accent — have to hold on a marketing hero, a working app screen, and a chart. Here they are, doing all three.
On a dark base the accent leads and neutrals carry the copy. Emotional, but still one clear action.
Same roles, calmed right down. The base goes light, text goes dark, the accent stays scarce.
Here neutrals step by value and the accent marks the one series that matters — distinction without a rainbow.
This is where the earlier modules pay off. Value decides which role is light and which is dark; attention decides that only the accent role may be vivid; relativity decides whether your accent survives on each surface. And the next module turns this hand-built palette into a system — the same roles, written as tokens, so they hold across a hundred screens without you repainting a thing.
The Palette glossary
Six words that turn “these colours don’t work” into a precise fix. Tap a card to flip it.
Questions you actually ask
What people get wrong
Build the palette
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.