60-30-10 Rule

60% dominant (neutral), 30% secondary, 10% accent. Ratios create visual calm.

How to apply it

Most pixels should be neutral. Saturated color earns attention only on the 10%.

60-30-10 Rule in practice: a concrete example

One accent, not five

Look at Stripe or Linear: most of the screen is neutral, a secondary tone carries the structure, and a single saturated colour marks the one thing you should do next. Because colour is rationed, the primary button actually stands out. A dashboard that paints every card its own bright colour has no accent left, so nothing leads the eye and everything competes for it at once.

Common 60-30-10 Rule mistakes

Spending the 10% accent everywhere, until no single action stands out.
Reading the ratio as three literal swatches instead of a balance of dominant, supporting, and accent across the whole screen.
Forgetting the accent still has to pass contrast. A colour used on text or a button has to be legible, not just vivid.

When 60-30-10 Rule doesn't apply

Expressive, brand-forward surfaces (a marketing splash, an event page, a playful consumer app) can break the ratio on purpose for energy. Data visualisation follows its own rules too: a chart needs enough distinct hues to separate its series, which is a different job than composing one calm interface.

Practise it on a real challenge

Dashboard — eight brand colors, zero focus

A SaaS team shipped a dashboard using all eight brand colors at equal strength. Everything competes for attention, so nothing wins — users can't find the primary action in the noise.