The 60-30-10 Rule: Balance Any Color Palette

Most palettes do not fail because the colors are wrong — they fail because every color is fighting for the same amount of space. The 60-30-10 rule fixes that with one decision: give your dominant color about 60% of the design, a secondary color about 30%, and an accent the last 10%. It is an interior-design heuristic that transferred almost perfectly to screens, and it is the fastest way to make any set of colors look deliberate instead of accidental.

What the numbers actually mean

The rule assigns every color in your palette a job, sized by how much surface it covers:

• 60% — the dominant color. This is the field everything else sits on: page backgrounds, large panels, the walls of a room. It sets the overall temperature and mood, so it is usually calm — a neutral, an off-white, a deep near-black, or a heavily desaturated version of your brand hue.
• 30% — the secondary color. The supporting layer that creates structure: cards, navigation, sidebars, upholstery. It should contrast enough with the dominant color to define regions, but not so much that it competes for attention.
• 10% — the accent. The loudest color in the smallest dose: buttons, links, highlights, a single cushion. Because it is rare, it is powerful — the eye lands on it first, which is exactly why call-to-action elements live here.

The percentages are proportions of visual area, not a paint-mixing formula. Nobody measures pixels — 60-30-10 simply means one clear base, one supporting layer, one scarce accent.

Why the ratio works

The rule works because it encodes visual hierarchy. When one color clearly dominates, the design reads as unified; when a second color covers a meaningful minority, the layout gains structure; when the accent stays scarce, it keeps its signaling power. Break the proportions and each layer loses its job — an accent used at 30% stops being an accent and starts being noise.

It also shrinks the decision space. Instead of “what do I do with these five colors?”, you answer three small questions: what is the field, what is the structure, what is the signal. That is the same role-based thinking behind How to Choose a Color Palette — 60-30-10 is that framework compressed into a single ratio you can apply mechanically.

Scarcity creates meaning. When orange appears only on the primary button, people learn that orange marks the intended next action. If orange also fills the header, every icon, three cards, and half the footer, that learned signal disappears. The ratio therefore governs communication as much as decoration: it reserves visual vocabulary for the elements that deserve attention.

The proportions also tolerate normal variation. One page might land near 65-27-8 and another near 55-35-10 while both preserve a clear hierarchy. The important property is the descending order and visible separation between tiers, not mathematical perfection. If two roles cover nearly equal area, a precise percentage will not rescue the weak hierarchy.

Applying it to a screen

The mapping from rooms to interfaces is direct:

• 60% → page background and large content surfaces. In a typical light UI this is white or a warm/cool off-white; in a dark UI it is a deep gray rather than pure black.
• 30% → structural surfaces: cards, headers, navigation, form fields, section bands. Often a tint or shade of the dominant color — Tints, Shades, and Tones covers how to derive these without changing hue.
• 10% → interactive and emphasis elements: primary buttons, links, active states, badges, key data points. This is where your most saturated brand color belongs.

Two practical checks before you commit. First, contrast: the accent almost always carries text or sits behind it, so run the pair through the Contrast Checker — a 10% color still has to hit WCAG thresholds. Second, temperature: dominant and secondary colors that share a temperature feel cohesive, and a warm accent on a cool field (or the reverse) pops harder — Warm vs. Cool Colors explains why.

Count whitespace as part of the dominant role. On a documentation page, the background visible between paragraphs, around the content column, and inside quiet cards may already occupy far more than 60%. Thin borders and small text do not contribute much visual area even when they occur hundreds of times. Conversely, a full-width accent banner contributes a great deal at once. Frequency and coverage are different measurements.

Choosing the three colors

The ratio tells you how much of each color to use, not which colors to pick. Two reliable ways to fill the slots:

• Start from a harmony. Generate a complementary, analogous, or triadic scheme with the Color Harmony Generator, then assign roles by intensity: the most muted color becomes the 60, the mid-weight one the 30, the most saturated the 10. Color Harmony Basics walks through what each scheme is good at.
• Start from an image. Extract the dominant colors of a photo you love with the Photo Palette Extractor — the extractor already returns them roughly ordered by coverage, which maps naturally onto dominant, secondary, and accent.

Whichever route you use, assign roles by behavior rather than beauty. The 60 color must remain comfortable across a large area. The 30 needs enough separation from the base to reveal structure without looking like a second focal point. The 10 needs to remain recognizable in small components and work with its foreground text or icon. A spectacular neon yellow may be a poor button fill if white text fails on it, while a slightly deeper yellow can keep the energy and support readable dark text.

A practical sequence is base first, structure second, accent last. Test the base behind a paragraph and a large empty area. Test the secondary on a card and in a navigation band. Only then audition accents inside actual buttons, links, badges, or chart highlights. Looking at three equal swatches gives each color equal area and hides the very relationship the rule is meant to create.

A worked interface example

Imagine a scheduling app with a warm off-white base, a muted blue-gray secondary, and a terracotta accent. The off-white fills the viewport, main content background, and open space inside simple sections. Blue-gray identifies the navigation, cards, selected date range, and field boundaries. Terracotta appears on the “Book appointment” button, the current-time marker, and a small notification count.

The exact coverage changes from screen to screen, but each role remains stable. A calendar view contains many blue-gray cells, so the secondary layer approaches 30%. A confirmation screen has fewer structural elements and more open background, so the dominant layer grows. Terracotta remains scarce on both. Users do not have to relearn what it means when the layout changes.

Now suppose every available appointment is filled terracotta. The accent could cover a quarter of the calendar, compete with the booking button, and make busy days feel alarming. The fix is not necessarily a new color. Use the secondary color or a quiet tint for available slots, reserve terracotta for the currently chosen slot and final action, and restore the signal’s scarcity.

Estimate coverage without measuring every pixel

You rarely need an area calculation. Squint at the complete screen or room until details blur. The color that still forms the field is the dominant role; the visible blocks dividing that field are secondary; the small high-attention marks are accents. A grayscale preview can help reveal hierarchy, although it evaluates lightness rather than color coverage and should not replace the full-color check.

For an interface, inventory components by approximate footprint. Start with viewport background and full-width bands, then large cards and image blocks, then buttons and small controls. Inspect representative screens rather than a single ideal mockup. Empty, dense, loading, error, and success states can shift coverage dramatically. A table with fifty accent-colored status pills may violate the intended ratio even though each pill is small.

For a room, stand at the main entrance and take in walls, floor, large furniture, rugs, curtains, and objects in that order. For packaging, view the front panel at shelf size rather than zoomed into the artwork. The method always follows human perception: judge large fields first, supporting masses second, and details last.

Bending the rule without breaking it

60-30-10 is a default, not a law. The useful variations keep the shape — descending, unequal proportions — while changing the numbers:

• More colors: split a slot rather than adding a fourth tier. A palette of five can run 60-30-5-3-2 — the structure still reads as base, support, accents.
• Monochrome interfaces: the 60 and 30 become two lightness steps of the same hue, and the 10 is the only saturated color on screen. This is the classic “gray UI with one brand color” pattern, and it is 60-30-10 in disguise.
• Dark mode: the ratio survives inversion — deep gray field, lighter structural surfaces, same accent. Watch saturated accents on dark backgrounds: they often need a slight lightness boost to keep contrast.
• Editorial or hero moments: a landing page can flip to 60% brand color for impact. That is a deliberate exception for one screen, not a new system.

When adding more colors, keep them inside roles. Two related neutrals can share the dominant 60, while two accents can divide the final 10. Do not give every swatch its own equal tier. A five-color interface might use 45% off-white and 15% pale gray as the dominant family, 30% slate for structure, 7% orange for primary actions, and 3% teal for informational highlights. The detailed numbers are less important than the continued base-support-signal grouping.

Data visualization is a special case because categories may require several distinguishable hues. Apply 60-30-10 to the surrounding product chrome and narrative emphasis, not blindly to every series. Plot background and grid can remain dominant and secondary, while the most important series takes the accent. Other series still need visible, accessible colors, but they do not all need the accent’s saturation.

Imagery, content, and responsive layouts

Photos, illustrations, video, and large charts occupy visual area even when their colors are not part of the interface token set. A page with a full-bleed red photograph already has a strong accent field. Adding a red navigation bar and several red buttons can push the composition far beyond the intended 10%. Either quiet the surrounding chrome, choose a less saturated image treatment, or reserve the accent for one critical action.

Content density matters too. A short marketing page may contain one primary button, while an admin table repeats controls across every row. Use hierarchy within components: a filled accent button for the primary action, quieter secondary buttons for routine actions, and text or icons for tertiary ones. Repetition can turn a nominally small component into a large color mass.

Recheck the ratio at each responsive breakpoint. On desktop, a colored sidebar might contribute most of the secondary 30%. When it collapses into a small menu on mobile, the page can become almost entirely dominant background. That is not automatically a problem, but the remaining structural cues may need stronger borders, section bands, or card surfaces. Do not enlarge the accent merely to fill the missing area; keep roles tied to purpose.

Accessibility and semantic color come first

A well-proportioned design can still be unusable. Text, icons, form boundaries, and controls need sufficient contrast regardless of their percentage. Check every meaningful foreground-background pair rather than assuming a saturated accent will pass. Bright yellows, cyans, and oranges often need dark text, while deep blues and violets may support light text.

Semantic states also override a decorative ratio. Error, warning, success, and focus colors must remain understandable and consistent even when they add hues beyond the core three. Keep their coverage local, pair them with labels or icons, and never rely on color alone. The rule should organize attention, not erase essential feedback.

Some interfaces intentionally minimize color for cognitive or accessibility reasons. In that case, borders, spacing, typography, and elevation can carry much of the structural 30 role while color stays restrained. The principle is hierarchy, not an obligation to paint 30% of every surface a visibly different hue.

Common mistakes

• Three equal thirds. With no dominant color the design has no anchor, and every region shouts at the same volume.
• Promoting the accent. Flooding 30–40% of the screen with your most saturated color exhausts the eye and leaves nothing for emphasis.
• Choosing the accent first. Pick the 60 first — it does the most work and constrains the rest. The accent is the last, easiest choice.
• Ignoring imagery. Photos and illustrations occupy area too. A photo-heavy page may need its chrome closer to 90-8-2 to stay calm.
• Skipping the contrast check. A perfect ratio with an unreadable button is still a failed palette.
• Counting components instead of coverage. Ten tiny links can occupy less space than one wide secondary panel; visual area, not item count, defines the ratio.
• Changing roles between screens. If the accent signals primary action on one page and passive decoration on another, users lose the pattern that made it useful.
• Forcing exact arithmetic. Time spent proving 59.4% versus 60% is wasted when the composition already has an obvious base, support, and signal.

The short version

Give one calm color about 60% of the surface, one supporting color about 30%, and save the loudest color for the last 10%. Fill the three slots from a harmony scheme or a photo extraction, derive the middle layer as a tint or shade of the base, and verify the accent’s contrast before shipping. The ratio is not magic — it is hierarchy made mechanical, and that is why it works on almost anything.

Try it yourself

Everything on ScanHue is free and runs in your browser: Photo Palette Extractor · Contrast Checker · Color Code Converter. How these guides are written and checked: editorial standards.