The 60-30-10 colour rule in web design: where it helps and why interfaces want less accent
The 60-30-10 colour rule, web design's borrowing from interior decorating, puts a dominant colour on about 60% of the space, a secondary on 30% and an accent on 10%. It's a good cure for palettes where every colour fights for attention, but on a website 10% accent is usually too much. Actions stand out best when the accent is rarer still.
Where the rule comes from
The 60-30-10 split is usually traced to interior design, where it's taught as a way to balance a room: walls and large surfaces in the dominant colour, furniture and textiles in the secondary, and cushions, art and small objects in the accent. Its exact origin isn't well documented; it's a rule of thumb rather than a finding. Fashion uses a similar idea: a suit, a shirt and a tie.
The reason it works in a room is that it creates a clear order. One colour sets the mood, one supports it, and one gives the eye somewhere to land. Without that order, three colours in equal amounts look like a flag.
Mapping it onto a web page
| Share | In a room | On a web page |
|---|---|---|
| 60% dominant | Walls, floor | Page background and large sections: usually a neutral such as white, paper, grey or near-black |
| 30% secondary | Sofa, curtains, rugs | Text, surfaces for cards and panels, the footer, alternate section bands |
| 10% accent | Cushions, a vase, a painting | Buttons, key links, focus outlines, small highlights |
That mapping already exposes the difference. In a room, the accent is decoration. On a website, the accent usually means “this is clickable” or “this is the next step”. Colour has a job, and a job works best when it isn't diluted.
Why interfaces want less than 10%
- The accent should mark actions. If the accent covers a tenth of the page, it ends up on headings, icons, borders and backgrounds as well as buttons, and visitors can no longer tell which coloured thing does something.
- Scarcity creates emphasis. One small orange button on a quiet page draws the eye. Ten orange elements compete with each other.
- Text needs contrast, not colour. Coloured body text or coloured headings tend to lower contrast and reading comfort. Most text belongs in the high-contrast neutral.
- Photographs bring their own colour. A page with real photos already has plenty of colour in it. A heavy accent on top makes it busy.
A more useful split for most sites is closer to 90-10, or even 95-5: neutrals for nearly everything, including text and surfaces, and the accent reserved for primary actions and a few key links. Brand colour can still be present in the logo, in photography and in one or two large moments, such as a band of colour in the footer.
When the classic proportions do fit
Expressive sites can use the full 60-30-10 with saturated colours: a children's museum, a festival, a playful consumer brand. Here the secondary colour often becomes a whole section background, and the accent still marks actions. The rule then helps by stopping a fourth and fifth colour creeping in. Even so, the 10% shouldn't be the same colour as the buttons if it's used decoratively; otherwise decoration and action look the same. Maximalist web design covers how bold palettes keep order.
Using it as a check, not a formula
- Take a full-page screenshot and squint, or blur it. Which colour dominates? It should be the one you meant.
- Count the elements in the accent colour. If several aren't clickable, move them to a neutral.
- Check that every accent use passes contrast: 4.5:1 for text, 3:1 for a button's boundary against the page.
- Make sure status colours (error, success) don't reuse the accent, or an error message will look like a button.
How Anticode applies colour proportion
Each Anticode design system works close to a 90-10 split. The ground, surface, text, muted and line colours are neutrals from the system's own palette, and one action colour is reserved for buttons, key links and the focus outline. Playful and Organic add a second brand tone used for decoration, such as Playful's sunflower shapes and Organic's clay underline, which brings them a little closer to the classic three-part balance. You can set the action colour to one of eight values in the visual editor.
Questions people ask
What is the 60-30-10 rule?
A rule of thumb for colour balance: about 60% dominant colour, 30% secondary and 10% accent. It comes from interior decorating and is used across design.
Does the 60-30-10 rule work for websites?
As a starting point. Websites usually work better with much less accent, because the accent marks what's clickable and loses meaning when overused.
Which colour should be the 60%?
On most sites, a neutral background: white, warm paper, light grey or near-black. Saturated colours over most of the page are tiring to read on.