The 60-30-10 color rule in UI Design

60-30-10 Color Rule in UI Design

A simple color rule known as ’60-30-10′ can help you create a proper balance between colors. Interior designers often use this rule. By following this rule, you will have 60% of the, 30% of your secondary color and 10% of the accent color. Good color schemes rely on contrast and harmony. This formula works because it creates a sense of balance and allows the eyes to move comfortably from one focal point to the next. It is also straightforward to use.


This is the dominant color or the primary color. It’s the one that stands out most. When choosing this shade it’s important to know what its meaning is. It should reflect the message of your brand.


This is the secondary color or complementary color. You’ll use half as much of this color as you did your main hue. This is used on major elements such as text, carousels, and other important features

The secondary color supports the main one but is still different enough to create contrast.


This is the accent color. This color can be used in buttons, pop-ups, highlights, etc.

Bright, vibrant colors are a great way to add visual interest. They can help draw attention to specific areas of a page or make it feel more alive overall.

After choosing a dominant color, I then balanced it with two other colors to produce the final design shown below

Dribbble Shot

Tips & Tricks

Exit mobile version