What Is the 60-30-10 Color Rule (And Should You Follow It)?

The 60-30-10 rule is one of the most commonly cited color guidelines in both interior design and digital design, offering a simple, memorable proportion for how much of a palette's three main colors should actually appear. It's genuinely useful as a starting heuristic, though understanding both its value and its limits matters more than following it as an absolute law. Like most design heuristics, its real value lies in giving beginners a concrete, memorable starting point rather than leaving color proportion as a totally open-ended, somewhat intimidating decision with absolutely no starting reference point to work from at all, which is exactly the kind of practical, low-effort guidance most beginners genuinely benefit from having early on.

The basic rule

The rule proposes that a balanced palette should use one dominant color for roughly 60% of a composition (often a neutral or background color), a secondary color for about 30% (supporting content or structural elements), and an accent color for the remaining 10% (small, deliberate highlights like buttons or key details).

Where the rule originally comes from

60-30-10 has its roots in interior design, where it originally guided the proportion of wall color, furniture and upholstery color, and decorative accent color in a room. The same underlying logic — one dominant tone, one clear supporting tone, one small deliberate highlight — translates naturally to digital design, which is why it migrated into web and UI design guidance over time.

Why the proportions work psychologically

The heavy weighting toward one dominant color creates a cohesive, unified overall feeling, while the smaller secondary and accent proportions provide just enough variety and visual interest to avoid monotony without overwhelming the eye. The specific 10% accent proportion in particular keeps a highlight color feeling special and deliberate, precisely because of how sparingly it's actually used relative to the rest of the composition.

Applying it to a real website or interface

In practice, a website's dominant 60% is often a neutral background or base tone, the 30% secondary color shows up in larger structural elements like headers, cards, or navigation, and the 10% accent goes to buttons, links, and other small elements specifically meant to draw attention or prompt an action from the viewer.

When to treat it as a loose guideline instead of an exact target

The specific percentages aren't meant to be measured with pixel-level precision — they're a useful rough proportion, not a strict mathematical requirement to hit exactly. A content-heavy page, a highly minimal interface, or a data-dense dashboard may reasonably deviate from the exact 60-30-10 split while still following the same underlying logic of one dominant tone, one supporting tone, and a small, deliberate highlight.

A simple way to self-check against the rule

Stepping back and roughly estimating which color visually dominates a finished design, which plays a clear secondary role, and which shows up only in small, deliberate highlights is usually enough of a check — if the proportions feel wildly different from this rough 60-30-10 shape, revisiting the color usage is often worthwhile, even without measuring exact percentages.