The 60-30-10 Color Rule in UX Design

The 60-30-10 color rule is a design guideline for UX designers that helps in selecting and pairing colors for new designs. The rule suggests that 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%.

Wendy Reyes

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 up the most space, followed by the secondary color, and then comes the accent color, which says 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 colors cover 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 uses a dark color to enhance the article title on a light background.

The Accent Color covers about 10% of the design and helps highlight specific design sections. 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. However, to apply the 60-30-10 Rule, we need to use a well-balanced color scheme. 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.

Conclusion:

The 60-30-10 color rule is a guideline that helps UX designers choose and pair colors with their designs. The Rule suggests that 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%. By following this Rule, designers can create visually attractive designs that are balanced and harmonious. The primary color should draw attention to large surfaces, the secondary color will support the dominant, and the accent color will highlight specific features or parts of the design. To achieve visual balance, it’s crucial to distribute colors and elements equally. Using only three established colors is recommended to simplify the design process. Designers can use free color palette generators to help them decide what colors to choose. The 60-30-10 Rule is not strict and can be customized to individual preferences, design goals, and creativity. When choosing colors for a design, start by selecting a neutral primary color, a supporting secondary color, and an accent color that pops.

If you found this post helpful, please share it on your social media or email it to a friend. I appreciate your support. You can also follow me or send me a message on social media.

Instagram: @Wendy_UXDesigner

Pinterest: @Wendy_UXDesigner