Building a palette
Turn 'I like these colours' into a small set that works: one brand colour, two neutrals, one accent, shared out by the 60-30-10 rule and checked against a readable contrast ratio.
THE RECIPE
One brand colour, neutrals, one accent
A working palette is smaller than people expect. Two neutrals (a near-white and a near-black or dark grey) carry most of the page. One brand colour does the identifying: headings, the logo, coloured blocks. One accent is saved for the single thing that must be noticed. That is it. Four decisions, not sixteen.
Think of any well-known app you use. Strip the photos away and you'll usually find white, a dark grey for text, one colour it is known by, and one bright colour that only appears on the button they want you to press.
Build a palette in five steps
- 1. Choose your neutrals
A near-white for backgrounds and a near-black or dark grey for text. Most of your page is these two. Tinting them a little towards your brand hue makes them feel like they belong, but keep it slight.
- 2. Choose one brand colour
One hue you'll be known by. If you have a logo, take the colour straight from it. If you're starting from nothing, pick a hue that suits the feeling: cool for calm and serious, warm for lively and immediate.
- 3. Make three versions of it
Same hue, three lightness settings, as in lesson 7: a pale one for backgrounds, a mid one for blocks and buttons, a dark one for text. One colour that can do three jobs.
- 4. Add one accent
Clearly different from the brand colour, often from the opposite side of the wheel. Its only job is the thing that must be noticed: a price, a button, a deadline. If it appears five times it stops being an accent.
- 5. Check every pair you'll actually use
Text on its background, white on the button, accent on white. Fix the failures now, while you have four colours, not later when you have forty pages.
Check yourself
Sara picks six colours she likes for her café menu: two greens, a mustard, a burgundy, a teal and a pink. The menu looks chaotic. What should she do?
- Keep all six and give each food category its own colour so customers can tell them apart
- Use the two she likes most, switching between them page by page
- Use only black and white so nothing can clash
- Keep one as the brand colour, add neutrals, allow one accent
Show the answer
Keep one as the brand colour, add neutrals, allow one accent
Yes. Six colours means no colour is hers. One green becomes the café's colour, the neutrals do the heavy lifting, and one of the others can survive as the accent on today's special.
HOW MUCH OF EACH
60-30-10
Having the right colours isn't enough; the amounts decide how the page feels. A useful rule of thumb from interior design: about 60% of the surface is your dominant neutral, about 30% is the secondary colour, and about 10% is the accent. Nobody measures this. It is a reminder that the accent is a teaspoon, not a cup.
A room with white walls, a green sofa and two orange cushions. Swap the amounts, orange walls and a white cushion, and the same three colours become exhausting.
A café menu palette
role colour where it goes share
neutral near-white paper the page itself 60
neutral near-black item names and prices -
brand deep green section names, the logo 30
accent warm orange today's special, one tag 10
Contrast check (a free online checker gives you the number)
near-black on near-white about 16 : 1 pass
deep green on near-white about 7 : 1 pass
warm orange on near-white about 2 : 1 FAIL as text
-> use it as a filled
shape with white
text on topFour colours. Every pair that carries words has been checked.
The orange never becomes text on white; it becomes a tag.Pure black on pure white is 21:1, the highest there is. 1:1 means the two colours are identical.
Check yourself
In a 60-30-10 palette, which share does each of these belong to?
- The near-white background of every slide
- The dark grey body text filling most of the page
- A brand-coloured band behind every slide title
- Section headings in the brand colour
- One orange 'Book now' button
- The single highlighted price on a menu
Show the answer
60: dominant: The near-white background of every slide, The dark grey body text filling most of the page
30: secondary: A brand-coloured band behind every slide title, Section headings in the brand colour
10: accent: One orange 'Book now' button, The single highlighted price on a menu
Contrast ratio
A number comparing the lightness of two colours, from 1:1 (identical) to 21:1 (pure black on pure white). The widely used accessibility guidelines ask for at least 4.5:1 between normal text and its background, and 3:1 for large text, meaning roughly 18pt and above, or 14pt bold and above. Free checkers online give you the number in seconds.
Black on white is 21:1. A mid grey on white lands near 4.5:1, right on the edge. Anything paler than that fails as body text, however nice it looks on your bright laptop screen indoors.
Check yourself
Light grey text on a white background looks elegant, so it is a good choice for the body text of a long article.
Show the answer
False
Small text always needs about 4.5:1 against its background, whatever job it is doing. Light grey on white usually lands near 2:1, which disappears in bright light and for anyone whose sight isn't perfect. If you want the text to feel lighter, make it smaller or give it more space around it, and keep the colour dark.
Colour that everyone can use
- Roughly one man in twelve and a much smaller share of women see colour differently; red and green are the pair most often confused.
- So never let colour be the only signal. Add a word, an icon, a tick and a cross, a position, a pattern.
- Red for error and green for success is fine, as long as the message also says 'error' or 'done'.
- Don't tell colour apart by hue alone in a chart. Make the slices or lines differ in lightness too, so they still separate in grey.
- Check any design in greyscale, as in lesson 7. If it survives, it will survive most eyes and most printers.
Check yourself
Match each palette problem to its fix
Show the answer
- Red and green dots are the only sign of pass and fail → Add a word or a tick and a cross
- Body text measures 3:1 against its background → Darken the text until it reaches 4.5:1
- Six colours compete on one page → One brand colour, neutrals, one accent
- The accent colour appears on every second element → Save it for the one thing that must be noticed
Check yourself
Nima checks a slide: white text on his brand's light blue. A checker reports 2.1:1. He has to keep the brand blue somewhere on the slide. What is the best fix?
- Leave it, because the projector makes everything brighter and the room will be dark anyway
- Make the text bold and a little bigger, which removes the contrast requirement
- Darken the blue until white text reaches 4.5:1, or put dark text on the light blue
- Add a thin drop shadow behind each letter
Show the answer
Darken the blue until white text reaches 4.5:1, or put dark text on the light blue
Right. Contrast is a relationship between two colours, so fix it by moving one of them along the lightness dial. Same brand hue, readable slide.
Lesson recap
- A palette is two neutrals, one brand colour in three lightnesses, and one accent. Four decisions.
- 60-30-10 is the rough share: dominant neutral, secondary colour, a teaspoon of accent.
- Normal text needs about 4.5:1 against its background; large text 3:1. Check with a free checker.
- Pale grey text on white is the most common readability mistake. Check the number instead of trusting your screen.
- Never let colour be the only signal: about one man in twelve sees colour differently, and red-green is the common pair.