The 60-30-10 color rule
Designers borrow this ratio from interior decorating: 60% dominant, 30% secondary, 10% accent. Drag the proportions and watch a page go from balanced to chaotic.
Accent: 10%
Clear hierarchy: a calm dominant field, a supporting color that gives structure, and an accent that pulls the eye to the one thing that matters.
Why the ratio works
The eye needs a hierarchy. A large, quiet dominant color gives it somewhere to rest; a secondary color creates structure and groups; a small accent becomes the focal point precisely because it is rare. Three equal colors fight for the same attention.
Applying it to UI
- 60% dominant: page background and large empty areas — usually a light or dark neutral.
- 30% secondary: navigation, cards, sidebars, headings, illustrations.
- 10% accent: primary buttons, links, active states, key data points. If everything is accented, nothing is.
Measure by visual weight, not pixel count: a saturated accent “weighs” more than the same area of beige. Generate three candidate colors on the palette generator and check the text on each with the contrast checker.
Frequently asked questions
What is the 60-30-10 rule?
A proportion guideline from interior design: about 60% of a space in a dominant color, 30% in a secondary color and 10% in an accent. It creates a clear hierarchy so colors support rather than compete.
How do I apply 60-30-10 to a website?
Use the 60% color for backgrounds, the 30% color for surfaces, navigation, cards and large type, and the 10% color only for calls to action, links and highlights. Text usually comes from a neutral outside the three.
Is 60-30-10 a strict rule?
No. It is a starting point. Minimal brands may run 70-25-5; bold ones may push the accent higher. What matters is that one color clearly dominates and the accent stays rare enough to draw the eye.