The 60-30-10 Rule: The Easiest Way to Balance Color
Palettes that look intentional instead of random usually have one thing in common: controlled proportion. The 60-30-10 rule is the simplest formula for getting that control right.
- 60% dominant (usually a neutral or your base), 30% secondary, 10% accent
- The accent is where your boldest color goes — and only there
- It works because the eye needs a place to rest (the 60%) and a place to look (the 10%)
- Adapt it: 60/25/10/5 adds a second accent without breaking the balance
What the Rule Says
Split your design’s color into three roles by area: 60% a dominant color, 30% a secondary color, and 10% an accent. The numbers aren’t sacred — they’re a target that keeps one color clearly in charge while giving the eye a single bright place to land.
What Goes in Each Slot
The 60% is usually a neutral or a desaturated version of your brand color — walls, backgrounds, large surfaces. The 30% supports and contrasts it — secondary sections, cards, navigation. The 10% is your most saturated color, reserved for buttons, links, highlights, and the one thing you want clicked or noticed.
Why It Works
Visual comfort comes from hierarchy. When everything competes equally for attention, nothing stands out and the design feels chaotic. The 60% gives the eye a calm field to rest in; the 10% gives it an obvious target. The rule is really just a memorable shorthand for "establish a clear dominant, support, and accent."
Adapting the Rule
Need more than three colors? Use 60/25/10/5 — the extra 5% is a second accent (a "danger" red, say, alongside a brand-colored primary accent). The principle holds: keep one color dominant, and keep the bright accents small. The moment your accent grows past ~15%, it stops being an accent and the balance tips.
Frequently asked questions
What is the 60-30-10 rule in design?
It splits a color palette by area into 60% dominant, 30% secondary, and 10% accent. It creates visual balance by keeping one color in charge and reserving the boldest color for small, high-impact details.
Which color should be the 10% accent?
Your most saturated, attention-grabbing color — used for buttons, links, highlights, and calls to action. Keeping it to roughly 10% is what makes it pop.
Does the 60-30-10 rule work for websites?
Yes. A neutral background (60%), a supporting section/card color (30%), and a saturated brand accent for buttons and links (10%) is a reliable starting point for web UI.
Test your color proportions
See how a palette looks at 60/30/10 area ratios