60-30-10 Color Rule in UI Design

The 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.

60-30-10 color rule

Read More: Top UI/UX Design Trends of 2023


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

  • 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 it with the background
  • Don’t use pure grey or black. It is more natural to add some saturation. We rarely see pure grey colors in real life
  • Using color generators can cut down on the time needed to find a good combination of colors.
1 comment
Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post
Best Figma Plugins

Top 5 Figma Plugins that can boost your workflow

Next Post
Best Figma Plugins

Best Figma Plugins in 2023

Related Posts