60-30-10 rule

The rule comes from interior decorating, where the split is walls, upholstery, and the things on the shelf: about sixty percent of the room in one colour, thirty in a second, ten in something that makes you look. It transfers to screens because it answers a question palettes do not. A palette says which colours are allowed. This says how much of each one to spend, and spending is where most interfaces go wrong.

Mapped onto a product, the sixty is almost always the neutral palette: page background, cards, table rows, the quiet greys most of the surface is actually made of. The thirty is a supporting tone that gives the layout structure, a darker chrome, a tinted sidebar, a header. The ten is the accent colour, and the number is the whole argument for it: an accent works by being rare, so ten percent is not a limit imposed on it but the mechanism by which it functions. The useful shock for people new to this is that the brand colour usually lives in that ten, not in the sixty. A company whose logo is orange does not get an orange product.

It is a heuristic, not a law, and nobody measures pixels. Treat it as a smell test rather than a spec: if the accent is turning up in the header, the sidebar, the empty state and three buttons on the same screen, it has stopped pointing at anything, and the fix is subtraction rather than a new colour. Plenty of good work breaks the ratio deliberately. Marketing pages saturate on purpose, a dark theme redistributes everything, and an illustration-led product may run closer to an even split. The rule earns its keep on ordinary application screens, which is most of them.

Two ways to check without a calculator. Squint at the screen, or drop it to greyscale, and see whether the thing you want looked at is still the first thing you find; that is the same question visual hierarchy asks, answered in paint. Or count elements rather than area: if more than one in ten of the coloured things on a screen wears the accent, the ratio is already lost.