Watch

The 60-30-10 rule 0:49

A 49-second explainer of The 60-30-10 rule, narrated over the same demo you can try yourself.

The The 60-30-10 rule explainer. Prefer to do it yourself? Try the interactive demo.

Try the interactive The 60-30-10 rule demo

What this video covers

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.

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.

More UX term videos

All UX term videos