The 60-30-10 rule is a simple ratio for splitting up a colour palette: 60% of your design uses a dominant colour (usually a neutral background), 30% uses a secondary colour, and 10% uses an accent colour. It works because it gives your eye one place to rest and one place to look, instead of five colours all shouting at once.
If you've ever picked five colours you genuinely loved, dropped them onto a page, and ended up with something that looked like a circus poster, this is the rule that fixes it. The problem was almost never your colours. It was your ratios.
What the 60-30-10 rule actually is
The rule says every design should distribute colour in roughly this proportion:
- 60% — the dominant colour. This is your canvas. Backgrounds, large empty areas, the base surface everything else sits on. It's the colour you barely notice, which is exactly the point.
- 30% — the secondary colour. This is your supporting cast. Cards, sidebars, section bands, containers, secondary buttons, borders. It creates structure and separation without demanding attention.
- 10% — the accent colour. This is your spotlight. Primary buttons, links, key highlights, the one number on the dashboard that matters. It's rare, and because it's rare, people actually look at it.
The percentages aren't meant to be measured with a ruler. Nobody is calculating the exact pixel coverage of your homepage. It's a mental model, and it works because it forces you to answer a question most people skip: what job is each colour doing?
Where the rule comes from
It's borrowed from interior design, where it's been in use for decades. Walk into a well-designed room and you'll see it: the walls and floor take up most of the visual space in one calm tone, the furniture and curtains form a second tone, and then there's a single bold cushion or a piece of art that provides the pop.
Now imagine that room with equally bold red, blue, and green walls, furniture, and art. It doesn't feel exciting. It feels exhausting. Your eye has nowhere to rest and nothing to land on.
That's precisely what happens to a website when you give five colours equal weight. The problem isn't that the colours are ugly. It's that none of them is in charge.
The biggest misunderstanding about the rule
Here's where most people go wrong, and it's worth stating bluntly:
Your 60% is usually NOT your brand colour.
If your brand colour is a strong blue, the instinct is to make 60% of the site blue. Do that and you get a page that feels like a corporate brochure from 2009 — heavy, saturated, and weirdly hard to read.
In real digital design, the 60% is almost always a neutral: white, off-white, a very light grey, a warm cream, or in dark mode, a deep charcoal. The neutral does the heavy lifting of holding the layout together.
Your brand colour usually lives in the 10%, sometimes in the 30%.
Look at almost any product site you admire and count the actual pixels. The brand colour is usually a shockingly small percentage of the screen. It just feels dominant because it's the only saturated thing on an otherwise calm page. That's the trick. Restraint is what makes the colour feel powerful.
How to build a 60-30-10 palette, step by step
Step 1: Start with a source, not a colour picker
Do not open a colour wheel and start guessing. Start from something real: your logo, a product photo, a moodboard image, a screenshot of a look you like.
Feed that image into a colour palette generator and pull the actual hex codes out of it. This gives you a palette that already has natural harmony, because the colours co-existed in a real image before you ever touched them. Our guide on extracting hex colours from an image walks through the process if you want the detail.
Step 2: Assign roles, not just colours
Now look at your extracted colours and ask, for each one: is this a background, a structure, or a spotlight?
Be honest. Most palettes only have one colour that deserves to be the accent. If you think two of them do, you're about to build a design that fights itself.
Step 3: Pick your neutral first
Choose your 60% before anything else. Something quiet. Pure white is fine and always safe. An off-white or very light warm grey often feels more considered and less clinical.
If you want it to feel connected to your brand rather than generic, take your brand colour and desaturate it heavily, then lighten it. A blue brand gets a barely-there blue-grey neutral. It's a subtle move and nobody will consciously notice it, but the page will feel cohesive in a way they can't explain.
Step 4: Choose your 30% for structure
This colour separates things. Card backgrounds against the page. A sidebar against the main content. A footer against the body. A slightly darker or slightly tinted version of your neutral usually works better than a whole new colour.
This is the step people over-complicate. The 30% does not need to be exciting. It needs to be useful.
Step 5: Reserve your 10% for what matters
Your accent goes on the thing you want clicked, read, or noticed. That's it. Nothing else gets it.
If your accent colour appears on the primary button, the secondary button, the links, the icons, the section headings, the badges, and the footer, you no longer have an accent. You have a fourth background colour, and nobody will know what to click.
Once you have your three hex codes, you'll often need them in other formats for CSS variables, design tokens or brand documents. A HEX to RGB converter handles that in a second, and RGB to HEX works the other way if you're pulling values out of a design tool.
A worked example: a SaaS landing page
Let's make this concrete. Say we extracted a palette from a product screenshot and got a deep navy, a mid blue, a warm coral, a light grey, and a cream.
Five colours. Too many. Here's the 60-30-10 assignment:
- 60% — Off-white background.
#FAFAF8. The page canvas, the hero section, most of the body. - 30% — Light grey / navy tint.
#EEF1F5. Feature cards, the pricing table container, the footer, borders. - 10% — Coral.
#FF5A47. The "Start free trial" button. The active link state. The one statistic in the testimonial that you want people to remember.
And the navy? It becomes your text colour, not a fill colour. This is the move people miss. Dark text isn't part of the 60-30-10 split at all — text is text. Trying to force your body copy into the ratio is how palettes get confusing.
Notice what happened: coral appears on maybe 3% of the actual pixels, but it's the first thing your eye finds. That's a working palette.
A second example: a food or restaurant brand
Same rule, completely different feel.
- 60% — Warm cream.
#FBF6EE. Backgrounds, menu pages, spacing. - 30% — Deep forest green.
#2F4A3C. The header bar, the footer, image overlays, section bands. - 10% — Mustard.
#E0A427. The "Book a table" button. Price highlights. The little divider flourishes.
Here the 30% is doing real work — that green is genuinely visible and gives the brand its character. But it still isn't the majority. The cream is. And the mustard, used sparingly, is what makes the booking button impossible to miss.
If you had made this 60% green, 30% cream, 10% mustard, you'd have a heavy, dark, slightly oppressive site. Same three colours. Completely different outcome. The ratio is the design.
Applying it to different formats
Websites
- 60%: page background, whitespace, hero areas
- 30%: cards, sidebars, footers, section bands, dividers
- 10%: primary CTA, active links, key badges, focus states
The classic failure mode on websites is giving every button the accent colour. Your primary action gets the accent. Your secondary action gets an outline or the 30% colour. If everything is urgent, nothing is.
Dashboards and data-heavy interfaces
This is where the rule earns its keep. Dashboards are the easiest thing in the world to make chaotic, because there's so much information competing for attention.
- 60%: the neutral background and empty chart space
- 30%: card surfaces, table rows, chart gridlines, borders
- 10%: the alert state, the number that's out of range, the primary action
If every metric card has a different bright colour, users will scan the whole screen and absorb nothing. If the screen is calm and one number is red, they will find that number in under a second.
Presentations and slide decks
- 60%: slide background
- 30%: the header bar, content blocks, chart fills
- 10%: the key figure on each slide, the takeaway line
One accent per slide. If you highlight four things on a slide, you've highlighted nothing.
Social graphics and link previews
Social images get seen at thumbnail size in a crowded feed, so the ratio matters even more. A calm background with one bold accent will out-perform a busy multi-colour graphic every time, simply because it survives being shrunk.
While you're there, it's worth making sure those images actually appear when people share your links — our Open Graph tags guide covers the setup, and you can sanity-check what a scraper actually pulls from your page with a link preview extractor.
Favicons and app icons
Here the rule mostly collapses, and that's fine. At 32 pixels there isn't room for three colours doing three jobs. Take your accent, put it against your neutral, and stop. Our guide on making a favicon that works on every browser covers the technical side, but the colour advice is short: two colours, maximum contrast, no gradients.
What happens in dark mode
You don't simply invert the ratios. This is a common and painful mistake.
In dark mode, your 60% becomes a dark neutral, but it should almost never be pure black. Pure black against bright text creates harsh contrast that causes eye strain and a halo effect. A deep charcoal or a very dark desaturated version of your brand hue is far more comfortable.
Your 30% becomes a lighter shade than the background rather than a darker one, because in dark mode, elevation is expressed by getting lighter. A card that sits "above" the page is lighter than the page, not darker.
And your 10% accent almost always needs adjusting. A colour that looks rich and confident on white will often look muddy or dull on charcoal. You usually need to lighten and slightly desaturate it. This is where working in HSL is genuinely easier than hex — you can nudge lightness without rebuilding the colour from scratch.
The ratios stay the same. The specific colours do not carry over unchanged.
Accessibility: the part people skip
Your 10% accent is, by definition, the colour on your most important elements. So it is the colour that absolutely must be readable.
- Aim for a contrast ratio of at least 4.5:1 for normal text against its background, and 3:1 for large text and interface elements.
- A pale accent on an off-white background might look beautiful in Figma and be genuinely unreadable on a laptop screen in daylight.
- Never use colour as the only way to convey meaning. If red means "error," also include an icon or the word "error." Roughly one in twelve men has some form of colour vision deficiency.
There's a useful shortcut here: if your accent doesn't have enough contrast to be readable, it also doesn't have enough contrast to draw the eye. Accessibility and effectiveness are pointing the same direction. Fixing one fixes the other.
And once your design is readable in terms of colour, it's worth making sure the words are too — a readability score checker will tell you whether your copy is as easy to scan as your layout.
Common mistakes
- Making your brand colour the 60%. Almost always too heavy. Brand colour belongs in the 10%, sometimes the 30%.
- Using the accent everywhere. The moment it's on more than a handful of elements, it stops being an accent.
- Picking three colours of equal saturation. They will fight. Your neutral needs to actually be neutral.
- Trying to fit text colour into the ratio. Text is text. Let it be dark on light or light on dark and stop worrying about it.
- Adding a fourth "just one more" colour. This is how palettes die. If you need a fourth, ask which of your existing three it's replacing.
- Copying the hex codes but not the ratios. You can steal a beautiful palette and still build an ugly page. The proportions matter more than the colours.
When to break the rule
It's a heuristic, not a law. Break it deliberately when:
- You're building an intentionally maximalist or expressive brand where visual chaos is the point.
- You're doing data visualisation that genuinely needs six distinguishable series. In that case, use a proper categorical palette and keep the interface around the chart on 60-30-10 so the chart itself is the only busy thing on screen.
- You're working with a single-colour or monochrome brand, where you're playing with shades and tints of one hue rather than three colours.
But break it after you understand it. The reason 60-30-10 works so well as a starting point is that it's very hard to make something genuinely ugly with it. Get the ratio right first, then earn the right to deviate.
Frequently asked questions
What is the 60-30-10 rule in design? It's a ratio for distributing colour: 60% dominant colour (usually a neutral background), 30% secondary colour (structure and containers), and 10% accent colour (buttons, links and highlights). It creates visual hierarchy and stops a design from feeling chaotic.
Should my brand colour be the 60%? Usually not. In digital design the 60% is nearly always a neutral, and the brand colour works hardest as the 10% accent, where its rarity makes it feel deliberate and draws the eye.
Does the 60-30-10 rule need to be exact? No. It's a mental model, not a measurement. Nobody is counting your pixels. What matters is that one colour clearly dominates, one supports, and one is rare enough to stand out.
Where does text colour fit into the ratio? It doesn't, really. Treat text as its own decision — dark on light, or light on dark — and apply the 60-30-10 split to surfaces, fills and accents.
How do I pick the three colours in the first place? Extract them from a real image, such as your logo or a product photo, rather than guessing on a colour wheel. Colours that already co-exist in an image tend to work together.
Can I use 60-30-10 in dark mode? Yes, but don't just invert your colours. Use a dark charcoal rather than pure black for the 60%, make your 30% lighter than the background rather than darker, and expect to lighten your accent so it doesn't turn muddy.
The takeaway
Most "bad" colour palettes aren't bad. They're just badly proportioned. Five great colours given equal weight will always look worse than three average colours given a clear hierarchy.
So: pick a quiet neutral for the 60%, something structural for the 30%, and one colour you're willing to protect for the 10%. Then be ruthless about not spending that 10% on anything that doesn't deserve it.
Pull your starting colours out of a real image with the colour palette generator, convert them for your CSS with HEX to RGB, and check your accent is actually readable before you ship it. The palette isn't the hard part. The discipline is.
