The short version
- The 60 30 10 rule says a balanced design uses a dominant colour for about 60% of the space, a secondary colour for about 30% and an accent for about 10%.
- The rule comes from interior design, where walls, furnishings and accessories naturally fall into those three roles.
- On screens, the 60% is usually the background, the 30% carries panels, shapes or type, and the 10% goes to the one thing you want people to notice or tap.
- In a gradient, the rule decides how much of the field each colour occupies, which is why the accent should appear in a small area rather than a full band.
- The numbers are a starting point: neutrals can count as the 60%, and many strong designs run closer to 70-25-5 or 90-10.
On this page
The 60 30 10 rule, usually written 60-30-10, is a simple guide to colour proportion: use a dominant colour for about 60% of a design, a secondary colour for about 30% and an accent for the last 10%. It comes from interior design, where walls, furniture and accessories fall into those roles on their own. It works just as well for social posts, slides, websites and brand palettes, because it stops every colour competing for the same attention.
linear-gradient(90deg, #f3efe6 0% 60%, #1f3a5f 60% 90%, #e76f51 90% 100%)What each share does
The three shares have different jobs. The 60% sets the mood and is usually calm: a background, a ground, a wall. The 30% gives structure and contrast, carrying panels, shapes or large type. The 10% is where the eye goes first, so it belongs on the single most important thing: a button, a price, a date, a logo.
| Share | Role | Typical colour | Where it goes |
|---|---|---|---|
| 60% | Dominant | Quiet: a neutral, a pale tint or a deep dark | Backgrounds, large fields, page ground |
| 30% | Secondary | Contrasting but not loud | Panels, cards, big type, image areas |
| 10% | Accent | The most saturated colour you have | Buttons, prices, key words, small shapes |
The 60-30-10 rule on a social post
On a post, the dominant colour is the background, the secondary is the headline or a shape behind it, and the accent is one small detail such as a date, a price or a single underlined word. The common mistake is giving the accent to the whole headline. Then 30% of the post shouts, and nothing stands out because everything does.
Dominant field, secondary type, and the accent saved for the date line.
The same proportions on a wide slide. The shares hold even when the shape changes.
Applying it to slides and websites
On slides, set the 60% once, as the background of every slide, and keep it. Use the 30% for titles, charts and image frames. Reserve the 10% for the one number or word per slide that the audience must remember. Presentation backgrounds goes further into grounds that don't fight content.
On a website, the page background and large sections are the 60%, navigation, cards, footers and body type are the 30%, and the 10% goes to calls to action and links. If your primary button is the same colour as your headings, the page has no accent left to guide people.
:root {
--dominant: #f3efe6; /* 60%: page and section backgrounds */
--secondary: #1f3a5f; /* 30%: headings, cards, navigation, footer */
--accent: #e76f51; /* 10%: buttons, links, key numbers */
}
body { background: var(--dominant); color: var(--secondary); }
.card { background: var(--secondary); color: var(--dominant); }
.button { background: var(--accent); color: #1a0f0b; }For a brand, write the shares into your brand style guide next to the hex codes. A palette without proportions invites every designer to pick their favourite colour for the background, and within a month the brand looks like three brands.
The 60 30 10 rule in a gradient
Gradients break proportions easily, because an even blend gives every colour the same share. Apply the rule by moving the stops: let the dominant colour hold most of the field, blend into the secondary across a third, and bring the accent in only at an edge or a small glow.
When to bend or break the rule
Break it when
- You work in one hue: a monochromatic scheme is closer to 60-30-10 in lightness than in hue
- The design is mostly type on a neutral, where 90-10 is cleaner
- A photo supplies its own colour and your palette only frames it
- The brand colour must dominate, such as a poster in full brand red
Keep it when
- Colours start competing and nothing stands out
- A team shares a palette and needs a rule to follow
- You have three or more strong colours to balance
- Buttons and key numbers are getting lost
The numbers are approximate. White space counts. Neutrals such as off-white, charcoal and sand can be your 60%, with two actual colours sharing the rest. What matters is the order: one clear leader, one support, one rare accent. For choosing the colours themselves, see how to choose brand colours and colour theory basics.
Questions people ask
What is the 60 30 10 rule?
It is a colour proportion guide: about 60% of a design in a dominant colour, 30% in a secondary colour and 10% in an accent colour.
Where does the 60-30-10 rule come from?
It is a long-standing rule of thumb in interior design, where walls, furnishings and accessories naturally take the three shares.
Does white count in the 60 30 10 rule?
Yes. Neutrals such as white, off-white, sand or charcoal often make up the dominant 60%, leaving the 30% and 10% for actual colours.
What colour should the 10% accent be?
Usually your most saturated colour, used on the one thing you want noticed first, such as a button, a price or a date.
How do I use the 60-30-10 rule in a gradient?
Move the colour stops so the dominant colour covers most of the field, the secondary blends across about a third, and the accent appears only in a small area or edge.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile
