If you’ve ever wondered how to create harmonious and visually appealing color combinations in design, the 60-30-10 rule could be the answer you’re looking for. Simple, practical and incredibly effective, this technique is widely used by interior designers, graphic designers and even fashion designers to achieve balance and aesthetic cohesion.

In this article, I’ll explain what the 60-30-10 rule is, why it works and how you can apply it to your design projects. Let’s go!

What is the 60-30-10 Rule?

The 60-30-10 rule is a guide to the distribution of colors in a composition. In other words, it suggests that you divide the colors into three proportions:

• 60%: Dominant color – serves as the basis of the design.
• 30%: Secondary color – complements and gives depth.
• 10%: Accent color – adds contrast and draws attention.

This division helps to create a visual balance, ensuring that no one color dominates too much or the design becomes too cluttered.

Why does the 60-30-10 Rule work?

The logic behind the 60-30-10 rule lies in the human perception of harmony and contrast. The use of specific proportions allows the eye to focus on the right elements without feeling overwhelmed. See how each proportion plays a role:

• 60% – The Base: Creates the overall context and keeps the composition cohesive.
• 30% – The Complement: Provides variation and balance, making the design more interesting.
• 10% – The Highlight: Adds energy, attracting the eye and creating strategic focal points.

These proportions respect basic design principles such as contrast, hierarchy and simplicity.

How to Apply the 60-30-10 Rule in Design?

The application of the 60-30-10 rule varies according to the type of project you are developing. Here are practical examples for different areas of design:

1. UI Design (User Interface)

When creating digital interfaces such as apps or websites, the 60-30-10 rule can be applied to provide a pleasant and functional look:

• 60% (Base): The background color of the interface, usually neutral, such as white or light gray.
• 30% (Complement): Secondary elements, such as sidebars, secondary buttons or icons in a more contrasting color, such as medium blue.
• 10% (Highlight): Action or attention-getting elements such as call-to-action (CTA) buttons, important links or notifications in vibrant colors such as orange or green.

This layout helps guide the user, highlighting the important elements while keeping the interface clean and intuitive.

5. Web Design

In web design, the 60-30-10 rule can be used to create pages that are visually balanced and provide a good user experience:

• 60% (Base): The predominant color of the page background, such as white or a soft pastel shade.
• 30% (Complement): Colors applied to secondary sections or blocks, such as the header area, footer or backgrounds of featured images (e.g. dark gray or light blue).
• 10% (Highlight): Eye-catching colors for elements that demand immediate attention, such as “Buy Now” buttons, highlighted links or promotional calls-to-action (such as vibrant red or yellow).

This method helps to create visual hierarchy, guiding visitors naturally through the page and highlighting key elements strategically.

2. Graphic Design

When creating a banner or graphic material, you can use the 60-30-10 rule as follows:

• 60% (Base): A clean background in white or a pastel shade.
• 30% (Complement): Text or shapes in a secondary color.
• 10% (Highlight): Buttons or key elements in a vibrant color to attract clicks.

3. Interior Design

Imagine you’re decorating a living room. The distribution of colors might look like this:

• 60% (Base): Neutral tones on the walls.
• 30% (Complement): Furniture in contrasting colors, such as a dark grey sofa.
• 10% (Highlight): Cushions or pictures in vibrant colors, such as yellow or blue.

4. Fashion

The 60-30-10 rule is also useful for choosing clothes, for example:

• 60% (Base): A pair of black pants.
• 30% (Complement): A gray shirt.
• 10% (Highlight): A red accessory, such as a scarf or shoes.

Examples of the use of the 60-30-10 Rule in famous brands

Successful brands use the 60-30-10 rule in their designs to create impactful and recognizable visual identities. Here are some famous examples:

1. McDonald’s

• 60% (Base): Red is the predominant color, used in packaging, advertising and even in the ambience of restaurants.
• 30% (Complement): Yellow, present in the logo, signage and decorative elements.
• 10% (Highlight): White, used in details such as text and secondary elements.

This combination reflects the brand’s energy, appetite and accessibility.

2. Apple

• 60% (Base): White, used in packaging, websites and the layout of stores.
• 30% (Complement): Gray, present on devices, such as Macs and iPhones, as well as text and graphics.
• 10% (Highlight): Black, used on buttons, logos and interface details.

Apple uses these proportions to convey minimalism, sophistication and modernity.

3. IKEA

• 60% (Base): Yellow, used as the predominant color in logos and visual communication.
• 30% (Complement): Blue, present in the logo and secondary graphic elements.
• 10% (Highlight): White, used as a background or to highlight text.

This palette evokes joy and confidence, in line with the accessibility of IKEA products.

4. Starbucks

• 60% (Base): Green, representing the brand’s core identity and its commitment to sustainability.
• 30% (Complement): White, used in the logo and packaging decoration.
• 10% (Highlight): Black, present in text and smaller graphic elements.

This combination conveys freshness and sophistication, as well as reinforcing the connection with nature.

5. Coca-Cola

• 60% (Base): Red, dominating cans, bottles and visual communication.
• 30% (Complement): White, used for the logo and contrast elements.
• 10% (Highlight): Black, present on labels and specific texts.

The scheme conveys energy and passion, as well as being highly memorable.

These brands show how the 60-30-10 rule can be adapted to create consistent and impactful visual identities. So by using this technique in your projects, you can achieve the same level of harmony and visual appeal, whether in branding, graphic design or digital interfaces.

Tips for using the 60-30-10 Rule

1. Choose Colors with Purpose: Use a color palette that matches the message or theme of the design.
2. Use the Chromatic Circle: Tools like the chromatic circle help you identify harmonious color combinations.
3. Test and Adjust: The 60-30-10 rule is a guide, but practice may require small adjustments to suit the context.

Conclusion

The 60-30-10 rule is a powerful resource for creating balanced and visually striking designs. By distributing colors strategically, we ensure that the audience is naturally guided by the design, highlighting the right elements and creating a pleasant experience.

So whether you’re just starting out or already have experience in design, try applying the 60-30-10 rule to your next project. I’m sure the results will be incredible!

Did you like this article? Then check out our other content on design and visual composition to learn more about how to improve your skills and create projects that impress.