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-ux-designer-nyc- The-60-30-10-Color-Rule-wendycecilia.com-wendyreyes

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.

wendy-reyes-ux-designer-nyc- The-60-30-10-Color-Rule-wendycecilia.com-wendyreyes

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. 

Follow me or send me a message on social media. 

Instagram: @Wendy_UXDesigner 

Pinterest: @Wendy_UXDesigner

Wendy Reyes


Read More

The 60-30-10 Color Rule in UX Design

How Micro-Moments Are Changing UX Design

The Design Thinking Process Explained

Wireframing in UX Design

See Also
wendy-reyes-ux-designer-nyc-wendyceciliacom-wendyreyes-uxdesigner-nyc-wendycecilia.com - Wendy Reyes UX Designer NYC

Embracing Writing as a Product Designer

Essential Tips Using UX Microcopy and Navigation Menus

My UX Reading List – Favorite Books About Design and User Experience

Introduction 101 to UX Design

How Important is Search Engine Optimization (SEO) for your Website?

How To Create An XML Sitemap And Submit It To Google

Tips for Building Your First Small Business Website

Things I Wish I Knew Before Creating My Website

Meet Wendy Reyes

HOME | ABOUT | DESIGN | WENDYALL POSTS

 

Copyright ©2020 - 2024.  All rights reserved for wendycecilia.com | All customization and content created by Wendy Reyes.

Scroll To Top