Tools & Ideas
UX Glossary

60-30-10 Rule

UX Glossary - 60-30-10 rule principle

What is the 60-30-10 Rule?

This rule is commonly used in the realm of color theory. It suggests dividing the colors in a space into three main proportions:

60% Dominant Color: The dominant color should cover about 60% of the space and serve as the primary backdrop.

30% Secondary Color: This color complements the dominant color and is used in furniture, fabrics, or secondary walls.

10% Accent Color: The accent color adds visual interest and is typically used sparingly in accessories, artwork, or small elements.

Why is the 60-30-10 rule important?

The 60-30-10 rule is important in design for several reasons:

Visual Harmony: By following the 60-30-10 rule, designers can achieve a visually pleasing and balanced composition. The distribution of colors in these proportions creates a sense of harmony and cohesion in the space.

Simplicity and Structure: The rule provides a clear framework for color selection and distribution, simplifying the decision-making process. It offers structure and guidance to designers, preventing overwhelming color combinations and ensuring a cohesive overall design.

Dominance and Balance: The dominant color, which covers 60% of the space, establishes a foundation and sets the overall mood. The secondary color, occupying 30%, complements and supports the dominant color, while the accent color, at 10%, adds visual interest and highlights specific elements. This distribution creates a sense of balance and prevents any one color from overpowering the space.

Visual Interest: The accent color, used sparingly in accessories or focal points, helps draw attention and create focal points within the design. It adds pops of interest and can guide the viewer's gaze to particular elements or areas.

Consistency and Cohesion: Applying the 60-30-10 rule consistently across different spaces within a project, such as rooms within a home or sections of a website, helps establish a cohesive and unified design language. It ensures a harmonious flow and prevents disjointed color schemes.

How to use the 60-30-10 rule?

To use the 60-30-10 rule in design, follow these steps:

Choose a Dominant Color: Select a color that will cover 60% of the space.

Pick a Secondary Color: Choose a complementary color that will occupy 30% of the space.

Add an Accent Color: Select an accent color that will make up 10% of the space and use it sparingly in small design elements to create visual interest.

Ensure consistency and balance by applying these proportions consistently across different areas in your design project.

Latest POSTS
Explore Our Blog
Sign up for our UX Blog

Don't miss the latest! We'll notify you of each new post.

How can we help_hand help you?