Building a brand palette that works: give every colour a job
Tim Knowles (opens in a new tab)15 min read
A brand palette works when every colour in it has a job. On a screen, that means near-whites and greys cover most of the page, a dark grey carries the text, and your brand colour marks the things people can click. Errors and success messages get colours of their own. The famous 60-30-10 split is a decorators' starting point, not a law you have to follow.
Try out the 60-30-10 split
Measuring…
Jobs
Error / success
Colours: drag one onto a job, or choose from the lists
For the curious: how the shares are measured
The page is drawn off-screen at twice its size and every pixel is counted towards the nearest colour in use, so the soft edges of letters are split between the text and what’s behind it. The numbers describe this sample page only, not screens in general. Button labels use whichever of your Text or Background colours stands out more on the Action colour, the way Material Design pairs each fill with an “on” colour. Two colours “look alike” here when both are clearly colourful and sit within 20° of each other on the OKLCH hue circle. In design tools, jobs like these are called semantic colours, and the swatches behind them are primitive colours.
Every colour needs a job
A brand palette isn't really a row of swatches. It's a set of jobs. Every colour on a page does one of five things: it fills the background, marks out panels and borders, carries text, shows what to click, or reports status. Give each job one colour and the page starts to make sense.
| Job | What it covers | Usual colour |
|---|---|---|
| Background | The page itself | A near-white, or a near-black in dark mode |
| Surface and borders | Cards, panels, dividers, input boxes | Light greys, or a pale tint of the brand |
| Text | Headings and body copy | A near-black or dark grey |
| Action | Buttons, links, highlights | The brand colour |
| Status | Errors, warnings, success | A separate red, amber and green |
Before you add another colour to your palette, ask which job it's going to do.
That's how professional design systems name their colours too. The GOV.UK Design System (opens in a new tab) lists its colours by job, such as text, link, border, error and brand, and it tells its teams not to copy hex codes but to use the named colour for the job. Google's Material Design goes a step further. Every fill colour gets a partner "on" colour for the text that sits on top of it, because a button is no use without a label you can read.
Where does the 60-30-10 rule come from?
From home decorating, and it's older than most design blogs say. The rule says a scheme looks balanced when one colour covers about 60% of the space, a second covers about 30%, and an accent covers about 10%. Nobody has been found who invented it, and I found no study that tests those exact numbers.
The trail goes back to the 1950s at least. In 1953 Ruth Morton wrote in a McGraw-Hill textbook, The Home and Its Furnishings (opens in a new tab), that "most decorators agree" a colour covering 60% or more of a room's surfaces becomes the dominant one, set off by an accent and a secondary accent. By 1960 there's a novel whose heroine is planning to use "that sixty-thirty-ten ratio" in her home, which she calls "a good safe proportion". That little word "that" suggests readers already knew what she meant. By the 1990s decorating books were calling it a rule, and by the early 2010s it had moved across into web design advice.
You'll also hear two popular origin stories, and neither has anything behind it. One says the rule comes from the golden ratio. That falls over on simple arithmetic, because 60 to 30 is 2 to 1, whereas the golden ratio is about 1.62 to 1. The other says it comes from a man's suit, shirt and tie. It's a handy comparison, but nobody has traced it back to anything.
The easiest way to picture the rule is in the room it came from. The walls are the 60, and you barely notice them. The sofa and rug are the 30. The cushions and a vase are the 10. And nobody paints the walls in the cushion colour.
Worth knowing: real brand guides bend the numbers. Texas A&M University's brand guide (opens in a new tab) asks for 75% primary, 20% secondary and 5% accent when the audience doesn't know the university yet, and 60/30/10 when it does. White counts inside its primary share. The University of Iowa caps its secondary colours at 10% of any design. Treat the split as a dial you can turn, not a fixed setting.
A little strong colour goes a long way
A bright buttercup and a dull violet don't balance one to one. Albert Munsell made that point in 1905, in A Color Notation (opens in a new tab), and his advice was to "use more of the weaker color": twice as many violets as buttercups. A strong colour needs far less space than a quiet one to hold its own, and that's the real idea behind 60-30-10.
Munsell also noticed that bright flowers please us because they're small and surrounded by wide green fields. Now flip the picture around, with tiny blue spots in a field of blazing orange, and it becomes hard to look at.
By 1921 Munsell's circle had turned the idea into a rule of thumb for printers: the stronger and lighter a colour, the less area it gets. Their worked example pairs a strong yellow with a dull purple-blue at 12 parts to 63, which works out at about 16% yellow to 84% purple-blue. Experiments in the 1980s backed up the direction. People judged that a small patch of strong colour balanced a large patch of weak colour, and Munsell's idea predicted their choices better than its main rival did. But no experiment has settled on an exact ratio.
So the rule underneath 60-30-10 is simple: big areas quiet, small areas strong. The numbers are just one handy way to start. If you'd like to know more about the painter himself, there's Munsell: the painter who put colour in order.
A side note: big areas make colours look stronger. The same colour looks lighter and more colourful on a wall-sized area than it does on a small swatch, and the CIE (the international body behind colour standards) published a report on this size effect in 2014. A colour you picked from a tiny chip can look louder than you expected once it's a whole background. Judge a background colour at full size.
What does 60-30-10 look like on a website?
On a website, the 60 is almost never your brand colour. It's a near-white background, or a near-black one in dark mode. The 30 is a second neutral for panels, text and borders, or a muted tint of your brand. And the 10 is your brand colour, on buttons, links and highlights.
| Share | In a room | On a web page |
|---|---|---|
| 60 | Walls | Near-white or near-black background |
| 30 | Sofa and rug | Greys for panels, borders and text, or a pale brand tint |
| 10 | Cushions and a vase | The brand colour on buttons, links and highlights |
Every professional design system I checked works this way. In Refactoring UI (opens in a new tab), Adam Wathan and Steve Schoger point out that nearly everything in an interface is grey. Their example is Facebook. We think of it as blue, yet the site is mostly grey. IBM's Carbon design system (opens in a new tab) says outright that "the neutral gray family is dominant", and it keeps blue for main actions. Apple, Google's Material Design, GOV.UK and Atlassian all let neutrals do most of the work as well.
The reason is practical. Your brand colour is the signal that says "click here". Spread it over 60% of the page and it's everywhere, so it stops pointing at anything. If your buttons don't stand out, check how much of the page your brand colour is already covering. One caution, though: no source I found measures the exact share neutrals take on a typical screen, so be wary of any precise figure you see quoted.
How many colours does a brand palette need?
Fewer than you'd think. Most brands need one or two main colours, not five, and Refactoring UI puts it as "one, maybe two" for most sites. Around those sit the neutrals, which means a near-white, several greys and a near-black, plus a small set of status colours for errors, warnings and success.
Now, counted as swatches, a working palette can still reach 30 or more, because each main colour needs lighter and darker versions. But counted as brand colours, it's still one or two. No study gives a magic number. Brand identity books, such as Alina Wheeler's Designing Brand Identity, describe a primary and a secondary palette and leave the count up to you.
You'll also come across confident statistics about brand colour, such as colour lifting brand recognition by 80%. I traced the popular ones, and none of them leads back to a study that measured what the claim says. Colour psychology: real or myth? covers what the evidence does support.
One more thing: colour is the hardest part of a brand to own. Researchers at the University of South Australia's Ehrenberg-Bass Institute tested 1,281 brand elements across 19 countries (opens in a new tab), and characters and logos were far easier to own than colours, because competitors share colours so much. The courts see it the same way. In 2013 Cadbury lost its bid to register its purple as a UK trade mark. What you can control is consistency, so use your colours the same way everywhere.
One brand colour, many versions
Each job on the page needs its own version of your brand colour. A pale version tints backgrounds. A middle one fills buttons. A darker one handles hover states and borders, and a very dark one can carry text. Refactoring UI suggests 5 to 10 shades for each main colour and 8 to 10 greys. Tailwind CSS (opens in a new tab) uses 11 steps per colour, and Radix Colors (opens in a new tab) uses 12, with a job for each step: backgrounds first, then component fills, borders, solid buttons, and finally text.
Make the set once, then reuse it. Refactoring UI warns that lightening and darkening on the fly is how you end up with "35 slightly different blues". Their method is to start with the shade that works as a button background, then choose the darkest and the lightest, fill in the gaps between them, and trust your eyes. If you keep nudging your blue a little lighter every time you need a background, that's the habit to stop.
If your brand guide already lists approved tints, use those as your scale. A brand guide protects how the brand looks in marketing, whereas an interface also needs shades that work for states and text. Both are fine, as long as every shade is defined once. Tints, tones and shades explains the words, and Lighter versions of a colour without it turning purple shows you how to build a scale that keeps its hue.
Try out your brand colour as text
As text on white
As a button with white text
As a button with black text
A scale of your colour, lightest to darkest
First step dark enough for text on white: 600, #BA4A00, 5.16:1. Your colour itself is 2.61:1 on white, so use step 600 for headings and links.
Contrast by the WCAG 2.2 formula: 4.5:1 for normal text, 3:1 for large text. Thresholds checked 19 September 2026. Ratios are never rounded up to pass.
For the curious: how the scale is built
The scale keeps your colour’s OKLCH hue and chroma and sets only its lightness, from 0.97 at step 50 down to 0.26 at step 950 (step 600 is 0.55). Colours the screen can’t show lose chroma until they fit, using the CSS Color 4 gamut-mapping method. Each ratio is measured on the hex code shown, using WCAG 2.2’s relative luminance. The step names are loosely modelled on Tailwind CSS, not taken from it.
Can your brand colour be used for text?
Often it can't. A lot of bright brand colours are too light to read as text on white, and too light to carry white text on top. WCAG 2.2, the current web accessibility standard, asks for a contrast of at least 4.5:1 for normal text and 3:1 for large text. I tested some typical bright brand-style colours with its formula. These are examples, not real brands.
| Colour | Text on white, or white text on it | Black text on it |
|---|---|---|
| Orange #FF7A00 | 2.61:1 ✗ | 8.04:1 ✓ |
| Yellow #FFD100 | 1.46:1 ✗ | 14.37:1 ✓ |
| Lime green #7ED321 | 1.87:1 ✗ | 11.23:1 ✓ |
| Cyan #00B5E2 | 2.41:1 ✗ | 8.71:1 ✓ |
A bright brand colour is a bit like a highlighter pen. It's great for marking a line, but you wouldn't write a letter with it. For the writing, you need a darker pen.
Your logo gets a pass, but the rest of the brand doesn't. The W3C writes the standard, and it says brand guidelines "beyond logo and logotype are not included" (opens in a new tab) in the exception. That means your headings, links and buttons all have to meet the ratio.
The usual fix is a darker version of the brand colour for text and links, plus dark text on top when the bright colour is used as a fill. GOV.UK does exactly this. Its link blue, #1A65A6, is a darker shade of its brand blue, #1D70B8. When I built an 11-step lightness scale for five brand colours, the first shade dark enough for text on white landed on the same step every time. Other tools space their steps differently, so the step and hex you get may differ, but the pattern holds. Orange's was #BA4A00, at 5.16:1. Yellow's was #8C6E00, at 4.83:1, and by then it no longer looks yellow at all. It reads as mustard or olive. In other words, a yellow brand can't have a readable yellow text colour, so put dark text on a yellow fill instead.
If you're wondering where the 4.5:1 figure comes from, and whether it's fair, that's covered in Can everyone actually read your design?
Pure black is a safety net. Every colour passes 4.5:1 with either pure black or pure white text on it, because the two ratios meet at 4.58:1. Swap pure black for a softer near-black such as #1A1A1A, though, and that guarantee is gone: a narrow band of mid-tones then fails with both. So if you use off-black text, check it against your mid-tone buttons.
Keep your error colour away from your brand colour
Picture a red brand button sitting right beside a red error message. People can't tell a call to action from a problem. That's why status colours are a separate set from brand colours, and why your error red has to look different from your brand even when your brand is red. GOV.UK, Material Design, Atlassian and Radix all define their error, warning and success colours apart from the brand.
Give each colour one meaning. Apple's design guidelines warn against using the same colour to mean different things, so if a colour marks what you can tap, don't also use it on text you can't tap.
And don't rely on colour alone to report status, either. Add an icon or a word. About 1 in 12 men of European ancestry has red–green colour deficiency, and for many of them an error red and a success green can look alike. Designing for colour blindness covers the detail.
What should you do differently in your next design?
Treat your palette as a set of jobs, and fill each job once.
- List the jobs first. Background, surface and borders, text, action, and status. Every colour you add should fill one of them.
- Let neutrals take the big areas. Use a near-white background, a few greys and a near-black for text. Keep your brand colour for buttons, links and highlights.
- Use 60-30-10 as a start, not a law. Big areas quiet, small areas strong. Adjust the numbers until the page looks right to you.
- Build a short scale of your brand colour once. Aim for five to twelve steps, pale to deep, and save them as named colours in your design app. Then stop tweaking on the fly.
- Find the first shade that works as text. Check it reaches 4.5:1 against your background, and use it for headings and links. Put dark text on bright fills.
- Keep status colours separate. If your brand is red, change the error colour, not the brand. Pair every status colour with an icon or a word.
- Pick a print version of each brand colour too. Bright screen colours often can't be printed the way they look on screen. Why bright designs go dull in print explains why.
Frequently asked questions
How do I pick colours for a website when all I have is the logo?
Give colours jobs rather than picking more colours. Use a near-white and a few greys for most of the page, a near-black for text, and keep the logo colour for buttons, links and highlights. Then make lighter and darker versions of it, so you have a pale one for tinted backgrounds and a dark one for text. Add separate colours for errors, warnings and success, and check every text colour against its background.
How many colours should a brand palette have?
There's no fixed number, but most brands need one or two main colours, not five. Around them sit the neutrals (a near-white, a few greys and a near-black), which do most of the work, plus status colours for errors, warnings and success. Each main colour then needs a short range of lighter and darker versions. Counted as swatches, that can reach 30 or more. Counted as brand colours, it's still one or two.
How many tints and shades of each colour do I need?
Enough to cover each job, which usually means somewhere between five and twelve. You need a pale version for tinted backgrounds, a middle one for buttons, a darker one for hover states and borders, and a very dark one for text. Popular systems use 9 (Refactoring UI), 11 (Tailwind CSS) or 12 (Radix Colors). Define the set once and reuse it, rather than inventing a new shade every time.
My brand colour fails the contrast check. Is the checker wrong?
Probably not. A lot of bright brand colours, such as orange, yellow, lime and cyan, fall well short of the 4.5:1 contrast that WCAG 2.2 requires for normal text, both as text on white and with white text on top. The logo is exempt, but headings, links and buttons aren't. The usual fix is a darker version of the brand colour for text and links, and dark text on top when the bright colour is a fill.
Should my greys be tinted with my brand colour?
You can, and plenty of design systems do. Greys cover most of a screen, so a slight tint of the brand hue makes the whole page feel related to the brand without adding any loud colour. Just keep the tint subtle so the greys still read as neutral, and check that your grey text still has enough contrast. Plain, untinted greys work well too.
For the curious
In design-tool terms, the jobs in this article are semantic colours, and the raw swatches behind them are primitive colours. Figma (opens in a new tab) uses those words for its variables, and Material Design calls the text partner of each fill its on colour.
The contrast figures use the relative luminance formula in WCAG 2.2 (opens in a new tab): Success Criterion 1.4.3 for text (4.5:1, or 3:1 at 18pt or 14pt bold), 1.4.11 for button edges and other interface parts (3:1), and 1.4.1 for not using colour alone. Ratios must not be rounded, so 4.499:1 fails. WCAG 3.0 was still a Working Draft on 10 September 2026, with its contrast method "to be determined".
The test scale was built in OKLCH, keeping each brand colour's hue and chroma and stepping its lightness. For all five hues, the first text-safe step sat at OKLCH lightness 0.55. I checked every ratio with two independent tools.
Munsell's 1921 area rule multiplies each colour's value (lightness) by its chroma (strength) and shares out area in inverse proportion. Read backwards, 60-30-10 implies strengths of 1 : 2 : 6. That's my reading, not his. Johannes Itten later taught a version of it as the contrast of extension. The size effect is documented in CIE 208:2014.
Sources (24)
- Albert H. Munsell, A Color Notation (opens in a new tab), 1905 (Project Gutenberg, 2nd edn 1907), para 77
- A. H. Munsell (introduction) and T. M. Cleland, A Grammar of Color (opens in a new tab), Strathmore Paper Co., 1921
- Ruth Morton, The Home and Its Furnishings (opens in a new tab), McGraw-Hill, 1953, pp. 42, 53
- Wilma Ross Westphal, Jeanie (opens in a new tab), Review and Herald, 1960, p. 330
- R. H. Morriss and W. P. Dunlap, "Influence of chroma and hue on spatial balance of color pairs", Color Research & Application 13(6), 1988, and "Joint effects of chroma and value on spatial balance of color pairs", Empirical Studies of the Arts 6(2), 1988
- K. Xiao, M. R. Luo, C. Li, G. Cui and D. Park, "Investigation of colour size effect for colour appearance assessment", Color Research & Application 36(3), 2011; CIE 208:2014, Effect of Stimulus Size on Colour Appearance
- Adam Wathan and Steve Schoger, "Building Your Color Palette" (opens in a new tab), Refactoring UI, 2018
- IBM, Carbon Design System: Color overview (opens in a new tab)
- GOV.UK Design System, Colour (opens in a new tab)
- Apple, Human Interface Guidelines: Color (opens in a new tab)
- Google, Material Design 3 in Compose (opens in a new tab) and material-web colour docs (opens in a new tab)
- Atlassian Design System, Color (opens in a new tab)
- Radix Colors, Understanding the scale (opens in a new tab)
- Tailwind CSS, Colors (opens in a new tab)
- USWDS, Using color (opens in a new tab)
- Figma Learn, "Tokens, variables, and styles" (opens in a new tab)
- W3C Design Tokens Community Group, Design Tokens Technical Reports 2025.10 (opens in a new tab)
- Texas A&M Marketing & Communications, Brand colors (opens in a new tab); University of Iowa, Color (opens in a new tab)
- Alina Wheeler, Designing Brand Identity, Wiley
- W3C, WCAG 2.2 (opens in a new tab), and Understanding SC 1.4.3 Contrast (Minimum) (opens in a new tab)
- W3C, WCAG 3.0 (opens in a new tab), Working Draft, 10 September 2026
- J. Birch, "Worldwide prevalence of red-green color deficiency" (opens in a new tab), JOSA A 29(3), 2012
- E. Ward, S. Yang, J. Romaniuk and V. Beal, "Building a unique brand identity" (opens in a new tab), Journal of Brand Management 27, 2020
- Société des Produits Nestlé SA v Cadbury UK Ltd [2013] EWCA Civ 1174 (opens in a new tab); Christian Louboutin v van Haren, C-163/16 (opens in a new tab), 2018
Next: Colour psychology: real or myth? What the evidence actually shows
Tim Knowles
Websites, marketing strategy and AI training
Tim has worked in marketing since 2000. At Your Marketing Specialist he builds the websites, and colouriser is one of them. He is self-taught, and learns each subject in depth before he advises on it.
Each Article is written from Tim's own research, and every Figure runs on colouriser's own colour maths.
More about Tim (opens in a new tab)