On this page
The rule in one paragraph
Borrowed from interior design, the 60-30-10 rule says a balanced scheme uses its dominant color for about 60% of the visual field, a secondary color for about 30%, and an accent for the remaining 10%. A living room might be 60% wall neutral, 30% furniture tone, 10% cushions-and-art pop; an interface might be 60% background neutral, 30% surface and structure, 10% brand color on actions. The numbers are a heuristic, not a law of nature — but the underlying insight is real and worth understanding.
Why proportion matters more than palette
Two designs using identical colors can feel completely different depending on how much area each color occupies. A palette that looks balanced as five equal swatches almost never looks balanced applied at equal areas — vivid hues at large sizes overwhelm, and rare colors gain power precisely because they're rare. That's the real content of 60-30-10: scarcity is what makes an accent work. A brand blue used on 10% of the screen points at the things that matter; the same blue on 60% of the screen is wallpaper, and the interface has to invent a new signal for "this is important."
This is also why the rule quietly encodes good hierarchy. If the accent marks primary actions and only primary actions, users learn the association in seconds — the color literally means "you can act here." Spend it everywhere and the meaning evaporates.
Translating it to interfaces
In UI terms, the split usually lands as:
- 60% — the canvas. Page background and large surfaces: neutrals, or a barely-there tint of the brand hue. This layer's job is to be comfortable for hours, which is why it's the least colorful.
- 30% — the structure. Cards, navigation, borders, secondary buttons, muted text: usually the middle of your neutral ramp, sometimes a desaturated relative of the brand color.
- 10% — the voice. Primary buttons, active states, links, key data points, the logo. This is where your actual brand color lives — and in many strong product designs it's closer to 5% than 10.
Note what this implies about "brand color": by area, a branded interface is overwhelmingly gray. That's not timidity — it's what makes the brand moments land. Look at any interface you consider polished and count: the accent is rarer than you remembered.
Working with the proportions
Choose the three roles from one coherent scheme — the palette generator gives you harmonious candidates, and complementary pairs work especially well because of the rule: at 60/10 proportions a complement energizes rather than clashes, which is the failure mode of complementary colors used 50/50 (our harmony guide covers the relationships). The contrast requirements don't care about proportions, though — accent-on-canvas and text-on-everything still need to clear WCAG in the contrast checker, and a 10% accent carrying critical meaning still needs the redundant cues that Use of Color demands.
When to break it
Plenty of great design ignores the arithmetic: near-monochrome brutalist sites, data-dense dashboards where color is reserved exclusively for data, editorial designs that go 90/10 with no middle layer at all, and dark modes, which invert the canvas but keep the deeper principle intact. Break the numbers freely — what you shouldn't break is the concept behind them: some color must be dominant, and some color must be scarce. Designs fail not at 55/35/10 versus 60/30/10, but when everything shouts at equal volume. The rule is just a memorable way of promising your interface a quiet background and a rare, meaningful voice.