60-30-10 Rule

60-30-10 rule may help you harmonize your color scheme and make a well-balanced interface design.

The idea is simple. When you choose a new color palette, 60% of the palette is dedicated to the dominant color — usually, we call it neutral. Secondary color, or complementary, makes up 30% of the palette, and a third color, accent one, is used for the remaining 10% of the design.

Picture by iniyavanappu

Here is a short explanation how this rule works

Tips & Tricks

Grayscale first. You can lose a lot of time by applying colors too early. Focus on spacing and laying out elements before
Contrast the text. Make it readable by contrasting with the background
Don’t use pure gray or black. It is more natural to add some saturation. We rarely see pure gray colors in real life
Use color generators. They will simplify your search for a well-balanced color palette. We listed the most popular for you below