Using colour
The 60-30-10 habit
A decorator's rule of thumb: most of one colour, a third of a second, a tenth of an accent. A habit of proportion, not a law.
Presented by ClearTrust Free for designers, students and the curious.
The 60-30-10 rule says that a scheme works when about 60 per cent of it is one dominant colour, 30 per cent a secondary colour and 10 per cent an accent. It comes from interior decorating and is repeated in web and graphic design. Nobody has tested the numbers, and there is nothing special about them. The idea behind them, unequal amounts, is sound.
How it is applied
In a room, the 60 is usually the walls and large floor areas, the 30 is furniture, curtains and rugs, and the 10 is cushions, lamps, art and flowers. In a man's suit it has been described as jacket and trousers, shirt, and tie. On a website it is the background, then panels and headings, then buttons and links. The dominant colour is nearly always a quiet one. The accent is the strongest and is placed where the eye should go, which on a web page is the thing you want pressed.
Why unequal amounts work
The numbers are a way of remembering a principle that painters have long taught: colours should not compete on equal terms. Two strong colours in equal areas fight for attention. Give one most of the space and the other becomes an event. The effect of a colour depends on its area. A small patch of strong red on a large grey ground looks vivid, while a whole wall of the same red is heavy. Unequal proportion also gives the eye a clear order in which to read a room or a page.
When to ignore it
Many successful schemes break the rule. A room in one colour throughout, in different textures, has no 30 or 10. A Rajasthani courtyard, a Mexican street or a Bollywood song sequence may use five strong colours in near-equal amounts and look splendid, held together by pattern, repetition and strong sunlight. Treat the ratio as a first sketch for anyone unsure where to start. Its origin is unclear, and it appears in decorating advice without a named source, which is a good reason not to treat the exact figures as meaningful.
How to do it
- Pick a quiet colour for about six tenths of the space: walls, background or the largest surfaces.
- Pick a second colour, different in lightness, for about three tenths.
- Pick one strong accent for the remaining tenth and put it where attention should go.
- Step back, squint and adjust the amounts by eye.
Sources and further reading
- Color scheme on Wikipedia
- Material Design: The color system
- Schloss and Palmer, Aesthetic response to color combinations: preference, harmony, and similarity (2011)
Original text by the Rang desk, written with AI assistance and checked against the sources above. Meanings of colour vary from place to place and person to person. If we have something wrong, tell us.