The 60-30-10 rule
Most palettes fail on proportion rather than on colour choice. The 60-30-10 rule fixes that with arithmetic instead of taste.
#f4f1ec
#c9d6df
#2f4858
#e08e45
What the numbers mean
Sixty per cent of the visible area goes to a dominant colour, usually the quietest one: a wall, a page background, the body of a poster. Thirty per cent goes to a secondary colour that creates the structure — furniture, cards, section blocks. Ten per cent is the accent, the colour that appears on the thing you want people to notice. The ratio is a guide, not a measurement; nobody is counting pixels.
Why it works
Two colours in equal amounts compete, and the eye reads competition as noise. A clear hierarchy of area tells the viewer where to look first, second and last, and that ordering is what separates a designed page from a decorated one. It is also forgiving: even colours that are not obviously harmonious tend to look intentional once their proportions are this clear.
Adapting it to screens
Interfaces usually need more than three colours, so treat the rule as three roles rather than three values. The sixty is your background and surfaces, the thirty is text and structure, and the ten covers links, buttons and states. Semantic colours — the red of an error, the green of a success — live outside the ratio and should stay rare enough that they keep their meaning.
The part to remember
Give your quietest colour most of the space and your loudest colour almost none. Proportion does more for a palette than an extra hue.
Generate a palette to test the ratio