visual design
The 60-30-10 rule
What is the 60-30-10 rule for colour?
The 60-30-10 rule is a rough recipe for colour proportion: about 60% a dominant (usually neutral) colour, 30% a secondary, and 10% an accent. It's not about which hues you pick but how much of each you use - the proportions that make a palette feel balanced rather than either bland or shouty.
Also known as: 60-30-10 rule, 60 30 10, colour proportion, colour balance
Prefer to watch?
Watch the recap 0:49
The demo
Same three colours, different amounts. Drag the proportions and watch a sample interface go from balanced to bland to garish - all without changing a single hue.
Accent: 10% (the remainder)
What this demo shows (text version)
A sample interface is filled by three colour areas - a dominant surface, a secondary panel, and an accent (buttons and links). Two sliders set how much of the space the dominant and secondary take; the accent is whatever's left. As you move toward roughly 60% / 30% / 10%, the design looks balanced: a calm base, a supporting tone, and a small accent that pops because it's rare.
Even the three out and it looks flat and directionless - nothing leads. Flood the accent and it looks garish, with the "highlight" everywhere and therefore highlighting nothing (and the call-to-action no longer standing out). The hues never change; only the proportions do. That's the 60-30-10 rule: hierarchy through quantity, with a scarce accent doing the pointing.
A palette succeeds on proportion as much as on hue: roughly 60% dominant, 30% secondary, 10% accent gives a calm base with a clear focal pop. Split the colours evenly and nothing leads; flood the accent everywhere and everything competes (and your call-to-action stops standing out). Keep the accent scarce - that scarcity is exactly what makes it draw the eye.
Slide it toward 60-30-10 and the sample settled - calm surface, supporting tone, one accent that pops because it's rare. Even the colours out and it went flat and directionless; flood the accent and it turned garish, the "highlight" everywhere and so highlighting nothing. The hues never changed - only how much of each you used.
The rule is about hierarchy through quantity. The 60% dominant (often a neutral) is the canvas; the 30% secondary supports and creates structure; the 10% accent is the spark - the button, the link, the thing you want found. Because the accent is scarce, it reads as important the instant it appears. Spend it freely and you spend its power.
It pairs with, but is separate from, choosing the hues (see colour schemes): the wheel tells you which colours relate, the 60-30-10 rule tells you how much of each to use. A harmonious scheme can still look terrible at the wrong proportions, and a simple palette can look polished at the right ones.
Treat it as a starting ratio, not a law of physics. The exact split flexes - minimalist designs lean even harder on the dominant; data-heavy screens need more structural secondary - and the accent must still clear contrast requirements where it carries meaning. The durable idea underneath is simply: one colour dominates, one supports, one punctuates.