The 60-30-10 Color Rule Explained

The 60 30 10 rule is the oldest and most reliable recipe for balanced color in design. It says to split your palette into three parts: 60 percent a dominant color, 30 percent a secondary color, and 10 percent an accent. Get those proportions right and almost any color scheme will feel composed instead of chaotic. It is the kind of simple rule that works because it mirrors how the eye likes to rest, move, and then notice.

This guide is for designers, brand owners, and developers who want their colors to feel intentional. I will explain what each part of the 60 30 10 rule does, show you a visual bar diagram of the split, give real examples from branding and UI, and walk through how to apply it to your own product step by step. By the end you will be able to look at any screen and know if the balance is off.

Key takeaways

What the 60-30-10 rule actually means

The rule comes from interior design, where decorators split a room into walls, furniture, and accents. It crossed into graphic and digital design because the same balance reads well on a screen. The numbers are a guide, not a law, but they are a remarkably good guide.

The idea is that the eye needs a large calm area to rest in, a medium area to give structure, and a small bright area to grab attention. If everything competes, nothing wins. The 60 30 10 split makes sure one color leads, one supports, and one pops.

The 60 percent dominant color

This is the color you see most. In a UI it is often the background and the largest surfaces, so it tends to be a light neutral or a very pale tint of your brand color. Its job is to set the mood and give the eye a place to rest.

Because it fills the most space, the dominant color should be calm. A loud, saturated color at 60 percent is exhausting to look at. Most strong designs use a near-white or a soft tint here.

The 30 percent secondary color

The secondary color supports the dominant and creates contrast. It fills medium areas like cards, sidebars, headers, or large blocks of text. It is usually darker or more saturated than the dominant so the layout has structure.

Think of it as the color that gives the design its bones. It is present enough to shape the page but not so present that it overwhelms the calm 60 percent.

The 10 percent accent color

The accent is the smallest share and the most powerful. It is reserved for the things you want people to notice: primary buttons, links, key icons, and highlights. Because it appears rarely, it carries weight.

The trap is overusing it. The moment an accent appears everywhere, it stops being an accent. Keep it at roughly 10 percent and it will pull the eye exactly where you want.

Why the proportions work

The split works because it builds a clear visual hierarchy. The eye starts in the calm 60 percent, the 30 percent gives it structure to follow, and the 10 percent tells it where to act. That is the journey of every good screen.

It also prevents the most common color mistake, which is using two strong colors in equal amounts. Equal strong colors fight for attention and create tension. The 60 30 10 rule resolves that fight by giving one color a clear lead.

How to apply it to a brand

For a brand, the 60 30 10 rule keeps your identity consistent across every surface, from a business card to a website. Start by choosing the three roles, then hold them everywhere.

Pick your three colors

Choose a dominant that can fill large areas calmly, often a neutral or a tint of your main color. Choose a secondary that gives contrast and structure. Then choose a single accent that becomes your call-to-action color.

A common pattern is to use your boldest brand color as the 10 percent accent, not the 60 percent dominant. This keeps the brand color special and lets it punch. For help choosing, see how to choose brand colors.

Document the ratios

Write the split into your brand guidelines so everyone applies it the same way. Show the dominant, secondary, and accent with their hex codes and example usage. This is what keeps a brand consistent as it grows.

How to apply it to a UI

In an interface, the rule maps cleanly to layers of the screen. Once you see the mapping, you can audit any product in seconds.

Map colors to surfaces

Use the dominant for page backgrounds and large empty areas. Use the secondary for navigation, headers, footers, and big content blocks. Use the accent only for primary buttons, active links, and the one thing on each screen you want clicked.

This mapping also keeps your accessibility honest. Because the accent appears on small, important elements, it is easy to make sure it has strong contrast against its background.

Want to build a balanced palette fast? Open the Zepixo Colors workspace to set dominant, secondary, and accent roles, then preview them on real UI before you commit.

Adapting the rule, not breaking it

The 60 30 10 rule is a starting point, not a cage. Some designs use a 70 20 10 split for an even calmer feel, or add a second accent for a 60 30 10 with a 5 percent extra pop. The principle is what matters: one color leads, one supports, and a small share grabs attention.

You can also apply it at different scales. A whole page can follow 60 30 10, and so can a single card inside it. The fractal nature of the rule is part of why it feels so natural. For the wider theory, see color theory for branding and our color harmonies explained guide.

Pairing 60-30-10 with color harmonies

The 60 30 10 rule tells you how much of each color to use, but not which colors to choose. That is where color harmonies come in. A harmony picks hues that look good together, and the rule then balances them by proportion.

A common, reliable combination is a monochromatic or analogous base for the 60 and 30, with a complementary accent for the 10. So your dominant and secondary feel unified and calm, and your accent pops because it sits across the wheel. This pairing gives you both cohesion and a clear focal point.

For example, take indigo as your brand color. Use a pale indigo tint for the 60 percent background, a deep indigo for the 30 percent structure, and a complementary amber for the 10 percent accent. The two indigos harmonize, and the amber draws the eye exactly where you want it.

Common mistakes with the rule

The biggest mistake is putting your boldest color in the 60 percent slot. A loud color across most of the screen tires the eye fast and leaves no room for an accent to stand out. Keep the dominant calm and save the punch for the 10 percent.

The second mistake is overusing the accent. The moment your accent color appears on every button, badge, and heading, it stops being special. Reserve it for the single most important action on each screen and let everything else stay quiet.

A third mistake is forgetting structure. If you skip the 30 percent secondary color, the layout can feel flat and floaty, with nothing to anchor the eye. The secondary gives the page its bones, so do not leave it out even in a minimal design.

A quick checklist

• Is your dominant color calm enough to fill 60 percent without tiring the eye?
• Does your secondary color give the layout structure and contrast?
• Is your accent reserved for roughly 10 percent of the design?
• Does each screen have one clear place the accent sends the eye?
• Are the ratios written into your brand guidelines?

Frequently asked questions

What is the 60 30 10 rule in design?

It is a guideline for balancing color by proportion. You use a dominant color for 60 percent of a design, a secondary for 30 percent, and an accent for 10 percent. The split creates a calm base, a supporting structure, and a small attention-grabbing highlight.

Which color should be the 60 percent?

Usually a calm neutral or a pale tint of your brand color. Because it fills the most space, a loud or highly saturated color at 60 percent becomes tiring. Save your boldest color for the 10 percent accent instead.

Can I use my brand color as the accent?

Yes, and it often works better there. Putting your boldest brand color in the 10 percent accent keeps it special and makes it pull the eye to key actions. The dominant and secondary can be neutrals that support it.

Does the rule work for dark mode?

Yes. In dark mode the dominant becomes a dark neutral surface, the secondary a slightly lighter surface or a structural color, and the accent your bright brand color. The proportions stay the same, only the values flip.

Is 60 30 10 a strict rule?

No, it is a flexible guide. Many designs shift to 70 20 10 or add a small second accent. The core principle, one color leading and a small share popping, is what matters more than the exact numbers.

How do I apply it across a whole website?

Map the dominant to backgrounds, the secondary to navigation and large blocks, and the accent to primary buttons and links. Document the ratios in your brand guidelines so every page follows the same balance.

Pick a calm 60, a structural 30, and a punchy 10, and your colors will feel composed instead of accidental. Try it on your next screen.