How to Use the 60-30-10 Color Rule in Web Design
The 60-30-10 rule originated in interior design — the idea that a well-balanced room uses its dominant color for 60 percent of the space, a secondary color for 30 percent, and an accent color for the remaining 10 percent. Interior designers have applied this proportion framework for decades because it reliably produces balanced, harmonious spaces. The same principle, applied to web design with appropriate translation, produces equally reliable visual balance in digital interfaces.
This guide explains what the rule means in a web context, how to identify which colors belong in which proportion tier, and how to apply it practically across a real UI.
Why Proportional Color Distribution Matters
Visual balance in color is not about using three colors — it is about using them in the right proportions. Three equally weighted colors produce visual chaos: no single color dominates, no clear hierarchy exists, and the eye has nowhere to rest or to be directed. Three colors in a 60-30-10 proportion produce visual hierarchy automatically: the dominant color establishes the overall mood, the secondary color provides depth and variety, and the accent color directs attention to the most important elements.
Most color problems in UI design are proportion problems rather than color choice problems. A palette with the "wrong" colors but correct proportions often looks better than a palette with beautiful colors applied in equal or random amounts. Understanding proportion is more immediately practical than understanding color theory for many designers.
Defining the Three Tiers for Web Design
The 60 percent tier — the dominant color — is your neutral foundation. In almost every web interface, this is the palette's neutral: backgrounds, page surfaces, card fills, and container areas. This is not a dramatic color — it is the visual ground that everything else sits on. In a light-mode interface, this is typically an off-white or very light neutral. In a dark-mode interface, it is a deep, rich dark. The specific neutral should carry your brand's temperature — warm off-white for warm brands, cool light gray for cool brands.
The 30 percent tier — the secondary color — adds depth to the neutral foundation. This might be a slightly different neutral (a medium gray for borders, dividers, and inactive states), or your brand's secondary color appearing in headers, navigation backgrounds, sidebar fills, and prominent feature sections. The secondary color provides variety without disrupting the overall visual calm established by the dominant neutral.
The 10 percent tier — the accent color — is reserved for the highest-priority elements: primary CTA buttons, active navigation states, key links, important data highlights, and the single most important focus of any given view. This is where your most vivid, most distinctive brand color lives. Its rarity is its power — when the accent appears, the eye notices it because everything else defers to it.
Mapping the Rule to Real UI Components
Here is how the 60-30-10 breakdown maps to typical web interface components for a light-mode SaaS dashboard:
60% — Neutral Foundation: Page background (#f9f8f6), card surfaces (#ffffff), modal backgrounds, table row fills (alternating between #ffffff and #f5f4f2), input field backgrounds. These elements cover the majority of visual space on any page.
30% — Secondary Layer: Navigation background (#1e2530 — a dark navy), sidebar fills, section header bands, table headers, the footer. These darker elements provide structure and frame the content without overwhelming it. Alternatively in a light-only design: medium gray borders (#d1d5db), inactive tabs, divider lines, and descriptive label text.
10% — Accent: Primary CTA button (brand blue #2563eb), active navigation link underline, focus ring, selected state fill on checkboxes and radio buttons, the primary metric value in a dashboard card, progress bar fill. These elements are numerous in count but small in total area — they cover roughly 10 percent of visual space despite appearing throughout the interface.
If you audit your current designs against these proportions, you will typically find one of two problems. Either the accent is overused (appearing decoratively in headers, background graphics, icon fills, and text — diluting its attention-directing power), or the secondary layer is absent (every element is either neutral or accent, with no intermediate layer to create visual depth).
The Brand Color Question
A common confusion when applying the 60-30-10 rule: where does the primary brand color live? The answer depends on what kind of brand color it is. If your brand color is a vivid, high-saturation hue — electric blue, bold orange, vivid green — it belongs in the 10 percent accent tier. Vivid colors cannot occupy 60 percent of a screen without creating visual fatigue and losing their attention-commanding power.
If your brand color is a deep, sophisticated dark — deep navy, rich forest green, warm charcoal — it can occupy the 30 percent secondary tier, used for navigation backgrounds and prominent structural elements. The neutrals (slightly lighter or warmer variants of the dark brand color) fill the 60 percent tier.
If your brand color is a warm neutral — cream, warm gray, warm beige — it fills the 60 percent tier as the dominant background color. A contrasting accent (often a complementary or analogous vivid color) fills the 10 percent tier. The mechanics of selecting that accent in relationship to the dominant are covered in our guide on Complementary, Analogous, Triadic: A Practical Guide to Color Harmonies.
When to Break the Rule
The 60-30-10 rule is a default, not a law. Several specific design contexts call for adjusted proportions.
Marketing and landing pages often use more saturated color across larger areas than dashboard interfaces. A hero section that fills 40 percent of the above-the-fold view with the brand's primary color is not violating any principle — it is using color for visual impact in a context where impact is the primary goal. The rule applies most strictly to functional interfaces used for extended periods.
Dark-mode and dark-first interfaces invert the proportion logic in interesting ways: the 60 percent tier is still the dominant background surface (now dark), but the accent tier often needs to be slightly more present (12-15 percent) to be visible against the dark background without increasing its actual area.
Illustration-heavy products may use color more liberally in the illustrative elements without violating the rule in the UI itself — the rule applies to the interface layer, and illustrations are a separate visual system. Build the palette foundation using the process in our Ultimate Guide to Building a Color Palette from Scratch, then let the illustration palette operate with its own color principles alongside it.
Auditing Your Existing Design Against the Rule
Take a screenshot of your most representative page and run a color percentage analysis on it. Tools like Adobe Color's "Extract from Image" feature or a manual pixel-counting approach can give you a rough distribution of color usage. Compare what you find to the 60-30-10 target. If your accent color is covering 30 percent of the screen, you know why everything feels visually noisy. If your secondary layer barely exists, you know why the design feels flat and undifferentiated.
The 60-30-10 rule does not require a perfect palette — it requires proportional discipline applied to whatever palette you have. Applied consistently, it produces interfaces that feel considered and balanced, where the user's eye moves naturally through the hierarchy you intended rather than fighting for purchase on a visually equal playing field.