60-30-10 Rule•7 min read

Common 60-30-10 Mistakes

And how to fix them for perfectly balanced palettes.

Why Balance Matters

The 60-30-10 rule exists because human eyes need visual rest. When every color demands attention, users get fatigued and important elements get lost. These mistakes are why many color palettes that look great in isolation fail in real applications.

The 6 Most Common Errors

Using Equal Amounts of Each Color

The Problem

When every color gets equal weight (33-33-33), nothing stands out. The eye has no clear path through the design.

The Fix

Commit to the hierarchy. Your dominant color should clearly dominate. If colors feel balanced, the accent isn't doing its job.

❌ Unbalanced

✓ Balanced

Making the Accent Color Too Prominent

The Problem

When your accent covers more than 10-15%, it loses its power. Accents work through scarcity — they signal importance.

The Fix

If an element doesn't need immediate attention, don't use your accent color. Reserve it strictly for CTAs, notifications, and key interactive elements.

❌ Unbalanced

✓ Balanced

Choosing a Loud Dominant Color

The Problem

Your 60% color is the backdrop for everything else. A saturated or dark dominant color makes everything exhausting to look at.

The Fix

The dominant color should almost disappear — whites, off-whites, very light neutrals, or in dark mode, deep grays/blacks. It's a canvas, not a statement.

❌ Unbalanced

✓ Balanced

Ignoring the Rule in Dark Mode

The Problem

Some designers abandon 60-30-10 in dark mode, using equal amounts of dark gray and accent colors. This creates visual chaos.

The Fix

Dark mode is just a color inversion. 60% dark background, 30% mid-tones and brand color, 10% bright accents still applies.

❌ Unbalanced

✓ Balanced

Not Accounting for Images and Media

The Problem

Photos and illustrations have their own colors. If you don't account for them, they can throw off your carefully planned ratios.

The Fix

Choose images that fit your palette or desaturate/overlay them. Consider images as part of your 60% (neutral) or 30% (brand-colored) allocations.

Applying the Rule Too Literally

The Problem

Obsessing over exact pixel percentages leads to awkward design decisions. 60-30-10 is a guide, not a law.

The Fix

Aim for the spirit of the rule: clear visual hierarchy with one dominant, one supporting, one accent. 55-35-10 works just as well as 60-30-10.

Self-Audit Checklist

Before launching, check your design against these questions:

Can I identify a single dominant color that covers most of the interface?

Does my accent color appear in less than 15% of the design?

Are accent-colored elements truly important (CTAs, alerts)?

Does the design feel restful, or does every section compete for attention?

In dark mode, is the background still clearly dominant?

Do images and media fit the palette or disrupt it?

When Breaking the Rule Works

Like all design rules, 60-30-10 has exceptions. Consider breaking it for:

• Landing pages — Hero sections often need more color impact
• Gaming/entertainment — Energy matters more than rest
• Artistic portfolios — Expression over convention
• Special campaigns — Seasonal or event-specific designs

The key is intentionality. Break the rule on purpose, not by accident. Learn more about color strategy in our Color Psychology guide.

Generate Balanced Palettes Automatically

Our AI creates palettes with proper 60-30-10 distribution built in — no manual balancing required.

Generate Balanced Palette