# The 60 30 10 rule: a colour ratio for designs and brands

[Canonical HTML page](https://gradiently.design/guide/60-30-10-rule)

Most palettes fail on proportion, not choice. Three numbers tell you how much of each colour to use, and they work as well on a phone screen as in the living rooms they came from.

## 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.

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.

60 sand, 30 navy, 10 coral: `linear-gradient(90deg, #f3efe6 0% 60%, #1f3a5f 60% 90%, #e76f51 90% 100%)`

The rule drawn as a bar. The accent is small, and that is exactly why it is the first thing you see.

## 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 accent works because it is rare. Double it and it stops being an accent.

- 60 Sand: #f3efe6
- 30 Harbour navy: #1f3a5f
- 10 Coral: #e76f51

A palette written with its proportions. Recording the share next to each colour keeps a team from using the coral everywhere.

## 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.

A portrait event post for a print fair with a calm background, strong headline and a small accent on the time

Dominant field, secondary type, and the accent saved for the date line.

The same print fair design laid out as a wide 16 by 9 slide with the same balance of colours

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](https://gradiently.design/guide/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.

```css
: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; }
```

Naming colours by role rather than by hue makes the proportions hard to break. Dark text on the coral button measures about 6:1.

> **The squint test** Squint at your finished design until the details blur. You should see one big colour, one clear second colour and a small bright point. If you see three equal blocks, or the accent is spread across the whole layout, move the shares back towards 60, 30 and 10.

For a brand, write the shares into your [brand style guide](https://gradiently.design/guide/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.

- Even thirds: no dominant colour: `linear-gradient(135deg, #1f3a5f 0%, #e76f51 50%, #f3efe6 100%)`
- 60-30-10: navy leads, coral glints: `linear-gradient(160deg, #13253f 0%, #1f3a5f 50%, #4f7cac 78%, #e76f51 100%)`
- Dark: ink, slate, gold: `linear-gradient(90deg, #0f172a 0% 60%, #475569 60% 90%, #fbbf24 90% 100%)`
- Soft: sage, cream, plum: `linear-gradient(90deg, #8fa98f 0% 60%, #f5efe0 60% 90%, #6b2d5c 90% 100%)`

The first blend gives three colours equal weight and feels busy. The second holds the same idea in proportion. The last two are ready-made 60-30-10 schemes.

## When to bend or break the rule

### Break it when

- You work in one hue: a [monochromatic scheme](https://gradiently.design/guide/monochromatic-color-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](https://gradiently.design/guide/how-to-choose-brand-colors) and [colour theory basics](https://gradiently.design/guide/color-theory-basics).

## FAQ

### 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.