The 60-30-10 rule is not a law of nature
It is a useful heuristic from interior design that gets repeated as though it were a specification. Here is what it is actually good for.
↑ Click any of these to repaint the entire site with it.
Sixty percent dominant, thirty percent secondary, ten percent accent. It appears in every color theory article, usually without attribution and usually stated as a rule.
It comes from interior design, where it describes walls, upholstery and cushions. It transferred to graphic design, then to web design, and along the way it stopped being a rule of thumb and started being repeated as a specification.
It is worth understanding because the underlying idea is correct. The numbers are not.
The idea underneath#
The real principle is hierarchy through area. If two colors occupy similar amounts of space at similar saturation, the eye has no instruction about where to look, and the composition reads as busy regardless of how well-chosen the colors are.
One color should dominate. One should support. Anything else should be small and deliberate.
That is true and it is worth internalising. The specific ratios are a way of remembering it, not a target to hit with a color picker.
Why the numbers do not transfer#
Web interfaces are much closer to 90-8-2. Look at any product UI you admire and measure the actual pixel coverage. The background is not 60% — it is 85–95%. Surfaces and text take most of the rest. The accent is typically under 2%: a primary button, a link, a focus ring, an active tab.
Applying literal 60-30-10 to a web page produces something that looks like a 2011 landing page — big blocks of secondary color doing nothing but occupying their allocation.
"Dominant" in a UI usually means neutral. The 60% in interior design is a wall color with some character. The 90% in a web interface is a near-white or a near-black. The chromatic colors in a well-built interface live almost entirely in the last 10%.
It says nothing about lightness. Two colors can respect the ratio perfectly and still fight, if they sit at the same lightness. Area is one lever; lightness is the stronger one.
A version that transfers#
If you want a heuristic for interface color, this one holds up better:
- One background. 85–95% of the surface. Near-neutral, with a trace of hue.
- A surface family derived from it. Cards, headers, inputs — three to four steps of the same hue.
- Two text tiers plus one subtle. Primary, muted, and something quiet enough for timestamps and placeholders.
- One accent. Used for exactly one thing: the primary action. If it appears on more than one element per screen, it is not an accent, it is a second brand color.
- Four semantic colors. Success, warning, danger, info. These are not part of the aesthetic palette; they are signage.
That is a complete interface palette and there is no 30% in it anywhere.
The one place the ratio survives#
Marketing pages, not product UI.
A landing page genuinely does have large blocks of color — a hero, alternating section backgrounds, a colored footer. There, thinking about proportional area is useful, and something in the neighborhood of 60-30-10 will keep you from making every section the same weight.
Even then, treat it as a sanity check rather than a plan. The question it is really asking is: is one thing clearly dominant? If yes, the composition will hold. If everything is competing, no ratio will save it.
The rule worth having instead#
If you want a single sentence to carry around:
Vary lightness for hierarchy, vary hue for meaning, and use saturation sparingly enough that it still means something when you do.
That does more work than any ratio, and it survives being applied to a dashboard, a marketing page and a mobile app without modification.