60-30-10 rule
A color-proportion guideline borrowed from interior design: roughly 60% of a screen in a dominant, usually neutral color, 30% in a secondary color, and 10% in an accent reserved for emphasis — enough color to guide the eye without competing for it.
Why it matters
Screens that feel colorful but calm almost always follow some version of this split. Inverting it — letting the accent become the majority — is why loud interfaces feel loud: when everything asks for attention with color, nothing gets it.
See it
60% — dominant
30% — secondary
10%
Same proportions, three palettes — the split does the work, not the hues.
The numbers
- 60% — dominant, usually neutral
- 30% — secondary, supporting surfaces
- 10% — accent, reserved for emphasis and actions
Related terms
Ask your assistant
Define "60-30-10 rule" using uxspot. Works in Claude, Cursor or any MCP client — connect the uxspot MCP.
Think it stuck? A 20-second round of Spot Check will tell you.