The 60–30–10 Rule

“Colour does not add a pleasant quality to the design — it reinforces it.”

While designing screens for our project, we mostly get confused about what colour to use and how to use it.
Today I will share about 60–30–10 Rule of home decor, which can also be used while designing interfaces.

The 60–30–10 Rule is a very easy-to-follow approach.
60% is the dominant colour, 30% is the secondary colour, and 10% is the accent colour.
The dominant colour consists 60% of the palette, usually light neutral colour, whereas Secondary colour makes up 30% of the palette, and the accent colour is 10% (usually used for Call to action buttons)

Apart from these colours, there are dark, mid and light neutrals.

Dark neutrals are very effective in creating contrast, whereas mid neutrals create depth in components and light neutrals are used for the background.

Apart from these colours, four semantic colours are used worldwide.

Red: Red is used for error and draws attention to important information.

Green: Green colour is used to indicate success.

Yellow: Yellow colour is usually used to indicate a warning.

Blue: Blue colour is used to indicate authentication and information.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store