Understanding the 60-30-10 Color Rule

Karthik Karki
2 min readJul 4, 2023

--

Image by Freepik

The 60-30-10 color rule simplifies the allocation of colors in a palette.

  • 60% of the color palette is the primary color, establishing it as the dominant hue.
  • The secondary color occupies 30% of the color palette, providing complementary support to the primary color.
  • The remaining 10% of the color palette is dedicated to accent color, which add visual interest and highlight specific elements.

Comparing the Impact: Before and After Applying the 60-30-10 Color Rule

Let’s explore the application of the 60-30-10 rule to the design showcased below. In this particular design, only two colors have been utilized: a background color and a shade of red.

Let’s take a look at the design after applying the 60–30–10 color rule. In this revision, the primary color remains white, while green is introduced as the secondary color and red is retained as the accent color.

Knowing When to Break the Rule

As the 60-30-10 rule serves as a guideline for selecting colors, you have the freedom to deviate from it whenever necessary. However, it is crucial to be mindful not to incorporate more than four colors in a design, as excessive colors can confuse users and adversely impact the overall aesthetics of the design.

By now, you should have gained a good understanding of the 60–30–10 color rule and its practical application. If you have any further questions or would like to share suggestions, please feel free to leave your comments. Thank you for taking the time to read, and I wish you a joyful and productive designing experience. Happy designing!

--

--