In design, we have the 60-30-10 color rule, which is a guideline that helps us UX designers choose and pair colors with our new designs. With this simple rule, the dominant color should take up 60% of the design, the secondary color should take up 30%, and the accent color should take up 10%. Easy.
Following this simple rule, we can create visually attractive designs that look balanced and harmonious. Remember, the primary color should take the most space, followed by the secondary color, and then comes the accent color saying voilà!
The 60-30-10 rule is essential because it focuses on the critical elements of design. UX designers can create a matching and practical design using dominant, secondary, and accent colors. The idea is that the dominant color should draw attention to large surfaces and set the overall mood. The secondary color will support the dominant, creating a good balance, while the accent color will come and highlight specific features or parts of the design.
It’s crucial to achieve visual balance when designing by distributing colors and elements equally. To accomplish this, the 60-30-10 rule allocates percentages to each color. Using only three established colors is recommended to simplify the design process. This helps to avoid overwhelming combinations of colors and keeps the design consistent.
Choosing colors for a design is easier when we follow the 60-30-10 rule. This rule has three components to help create a cohesive color scheme.
The Main Color of our design is usually the primary color and should cover 60% of the design. It’s typically neutral and can be used as the background color—for example, white, blue, and beige. I prefer light colors.
The Secondary Color supports the primary color and adds more visual attraction to the design. Secondary also covers about 30% of the design and can be used for subheadings, typography, and icons. Examples of secondary colors are teal, black, and dark blue. Let’s say a title using a dark color to enhance the article title on a light color background.
The Accent Color covers about 10% of the design and helps highlight specific design sections, and it’s usually a color that contrasts with the primary and secondary colors. Examples of accent colors include yellow, orange, and light green—more vibrant colors.
We choose colors that go well together to ensure the designs look great. This will help make the designs more interesting and engaging. I sometimes use free color palette generators to help me decide what colors to choose. Here are some suggested tools for creating a color palette:
- Coolors.co
- Color Space
- Adobe Color
As designers, we find the 60-30-10 rule helpful in achieving visual interest and good symmetry. Of course, this rule is not strict and can be customized to our individual preferences, design goals, and creativity. But to apply the 60-30-10 rule, we need to use a well-balanced color scheme.
Conclusion: When choosing colors for a design, start by selecting a neutral primary color, a supporting secondary color, and an accent color that pops. The chosen colors should be based on the design goals and desired overall look. Remember, mastering color takes practice, so keep practicing, and you’ll improve.
