---
name: 60-30-10 rule
slug: sixty-thirty-ten-rule
category: color
status: published
created: 2026-08-21T00:00:00.000Z
modified: 2026-08-21T00:00:00.000Z
definition: A proportion guideline that gives about 60 percent of a layout to a
  dominant colour, 30 percent to a secondary, and 10 percent to an accent.
aliases:
  - name: 60/30/10
    source: community
  - name: color proportion rule
  - name: dominant secondary accent
tags:
  - perception
relations:
  contrastWith:
    - color-harmony
  variantOf: []
  partOf: []
  seeAlso:
    - accent-color
    - visual-balance
implementations: []
sources:
  - title: The 60-30-10 Rule (UX Planet)
    url: https://uxplanet.org/the-60-30-10-rule-a-foolproof-way-to-choose-colors-for-your-ui-design-d15625e56d25
demo: inline
exhibit: false
useWhen: deciding how much of each colour to use, not which colours
---

The rule comes from interior decorating, where the split is walls, upholstery, and the
things on the shelf: about sixty percent of the room in one colour, thirty in a second, ten
in something that makes you look. It transfers to screens because it answers a question
palettes do not. A palette says which colours are allowed. This says how much of each one
to spend, and spending is where most interfaces go wrong.

Mapped onto a product, the sixty is almost always the [neutral palette](/neutral-palette):
page background, cards, table rows, the quiet greys most of the surface is actually made
of. The thirty is a supporting tone that gives the layout structure, a darker chrome, a
tinted sidebar, a header. The ten is the [accent colour](/accent-color), and the number is
the whole argument for it: an accent works by being rare, so ten percent is not a limit
imposed on it but the mechanism by which it functions. The useful shock for people new to
this is that the [brand colour](/brand-color) usually lives in that ten, not in the sixty.
A company whose logo is orange does not get an orange product.

It is a heuristic, not a law, and nobody measures pixels. Treat it as a smell test rather
than a spec: if the accent is turning up in the header, the sidebar, the empty state and
three buttons on the same screen, it has stopped pointing at anything, and the fix is
subtraction rather than a new colour. Plenty of good work breaks the ratio deliberately.
Marketing pages saturate on purpose, a dark theme redistributes everything, and an
illustration-led product may run closer to an even split. The rule earns its keep on
ordinary application screens, which is most of them.

Two ways to check without a calculator. Squint at the screen, or drop it to greyscale, and
see whether the thing you want looked at is still the first thing you find; that is the
same question [visual hierarchy](/visual-hierarchy) asks, answered in paint. Or count
elements rather than area: if more than one in ten of the coloured things on a screen wears
the accent, the ratio is already lost.