The 60-30-10 Color Rule: How Modern Designers Actually Use It in 2026

The 60-30-10 color rule has been recycled in interior design articles for so long that most web designers either ignore it or apply it with a religious literalness that doesn't survive a real product. The rule itself is simple — pick three colors, use them in roughly 60%, 30%, and 10% proportions — but in 2026, the units, the surfaces, and the contexts that actually matter look almost nothing like the cushions-and-curtains examples it was born from.

This guide takes the rule, strips it back to what it really teaches, and rebuilds it for the surfaces you ship today: dark dashboards, OLED-friendly mobile apps, landing pages that have to convert, and component libraries with twelve different elevation tokens. By the end you'll have copy-paste palettes you can drop into a real codebase, not a mood board.

What the rule actually says (and what it doesn't)

The textbook version: a balanced color scheme uses one dominant color for about 60% of the visible surface, a secondary supporting color for 30%, and an accent for 10%. The accent is what the eye lands on. The dominant color is what the eye rests in.

That's it. The rule says nothing about which colors, nothing about hue, nothing about contrast. It is a proportion rule — a way to keep one color from dominating until the design feels monotone, and to keep the accent from showing up so often it stops being an accent.

What gets lost in most explainers is the second clause: the 60% is supposed to be the resting state of the eye, not the literal pixel count of an image. A landing page hero with a giant photo doesn't violate the rule because of the photo — it violates it if the photo's dominant tone competes with the page's intended dominant.

Translating the rule to a real digital product

In a 2026 web app, the three "colors" of the rule map to three roles, not three swatches. Each role can have multiple tokens that share a hue family.

Notice the dominant role has three tokens of similar dark neutrals. That's not breaking the rule — those tokens together make up the 60%. The rule is about visual weight, not about CSS variable count.

The dark mode reading of the rule

Most 60-30-10 examples on the web are still light-mode. In dark UI, the dominant color is almost always a near-black neutral, the secondary is a slightly elevated near-black, and the 10% accent is the only chromatic color on the page. That's why dark designs feel premium when done well — the eye gets a long chromatic break, then a single bright moment.

If you've read our dark mode palette guide, this should sound familiar: dominant surfaces in dark mode are not "black", they are a stack of three near-black neutrals at different elevations, all sharing the same hue. That stack is your 60%.

A copy-paste palette that obeys the rule

Here's a complete dark palette built around the 60-30-10 ratio. The three "60% surfaces" are intentionally close in hue so they read as one visual surface with elevation. The "30% supporting" set is desaturated and slightly cooler. The 10% accent is the only saturated color in the entire system.

:root {
  /* 60% — dominant dark neutrals (near-black, same hue family) */
  --bg:        #0a0a0f;
  --bg-card:   #15151f;
  --bg-elev:   #1d1d2a;

  /* 30% — supporting (borders, dim text, icons) */
  --border:    #2a2a3a;
  --text-dim:  #a0a0b8;
  --icon-mute: #6b6b80;

  /* 10% — accent (CTA, focus, brand) */
  --accent:    #a855f7;
  --accent-2:  #ec4899;
  --accent-glow: #a855f740;

  /* Always: text on the dominant */
  --text: #f5f5fa;
}

You can drop that block into any framework (Tailwind v4, vanilla CSS, styled-components) and it will obey the rule by construction. Generate a different version of this palette in any base color using the free generator — the export panel gives you the same shape for whatever brand you're building for.

How the rule changes by surface type

Landing pages

The dominant color is your hero background. The secondary is your section-divider backgrounds plus body text. The accent is the primary CTA — and only the primary CTA. Secondary CTAs should sit in the secondary color family with a subtle border, not steal accent. Pages where every CTA is colored equally measurably underperform pages with one clear accent — there is no longer a dominant action for the eye to land on.

If your hero contains a product screenshot, treat the screenshot as part of the secondary band, not a fourth color — design it so its dominant tones live in your secondary palette.

SaaS dashboards

Dashboards almost always have a sidebar, a top bar, and a content area. The 60% dominant is the content area background. The 30% is the sidebar plus the top bar (slightly different elevation, same hue family). The 10% accent is the active nav item, the primary action button, and chart highlight color. If your charts use rainbow palettes, those need to live in their own categorical scale — they're data colors, not part of the 60-30-10 brand allocation. Treat them as a separate token group.

Mobile apps (especially OLED)

OLED screens turn pure-black pixels off, so the dominant color in a mobile dark theme is often #000 or very close. The trade-off is that elevation surfaces have to come from just the secondary band, which means your 30% color often does double duty as both surface and border. To keep the rule, either nudge the dominant up to #0a0a0f (you lose a little OLED battery savings, but you get a real elevation system) or keep #000 and lean on 1px borders in your 30% color to define cards.

The four mistakes that look like rule-following but aren't

1. Three swatches but no hierarchy

Picking exactly three colors and using each one in equal measure is not 60-30-10. It is "I picked three colors." The rule lives in the proportions; if your dominant is only on 40% of the surface and your accent is on 30%, the eye has nowhere to land.

2. Treating images as "free" surface

Big illustrations, photos, and gradients participate in the 60-30-10 budget whether you planned for them to or not. A purple gradient hero on a near-black page will feel like 50% accent even if the dominant background continues underneath. Either lower the gradient opacity, mask it, or accept that the gradient is your accent budget on that page.

3. Using the brand color as both accent and supporting

If --accent shows up in both your CTA and your link color and your divider tints and your active nav, you've allocated it more than 10%. The fix is usually to introduce a desaturated version of the same hue (lower S in HSL) for the supporting role, and reserve the saturated version for true 10% moments.

4. Forgetting that text is a color too

A page filled with white-on-near-black text technically uses two colors. Body text usually counts toward your 30% supporting band (it has visual weight, even though each glyph is small) — and headlines often count toward your accent band when they use a gradient or brand color. If you do a gradient text headline, that is an accent moment.

How to test if you're following the rule

The cheapest test: take a screenshot of your full page, blur it heavily in any image tool until the text is illegible, and look at the resulting color blob. If you can roughly see one dominant tone, one supporting tone, and one tiny accent dot — you're following the rule. If everything looks evenly mixed, your accent isn't doing its job. If it's all one color, your secondary needs more contrast.

For a more precise test, drop a screenshot into any color extractor (or our background-removal tool, which exposes a quick palette view as part of the export step) and confirm the top-three extracted colors roughly match your intended 60/30/10 split.

Pairing the rule with the rest of your design system

The 60-30-10 rule is a starting point, not a complete system. Pair it with:

• WCAG contrast checks on every text/background combination — the rule says nothing about legibility. We cover thresholds and tools in our 2026 contrast guide.
• An OG image system that uses your accent at the standard 10% — generate consistent ones with our OG Image Generator.
• A favicon palette that matches your accent so brand color is consistent across the tab strip — see the Favicon Generator.
• Real component primitives that automatically apply the right token to the right surface — read more on best practices in Tailwind's color customization docs, or in Figma's variable system if you design before you build.

FAQ

Does the 60-30-10 rule still apply if I'm using more than three colors? Yes — group your colors into three roles by visual weight. A semantic color system with success/warning/error states still allocates those colors to the 30% supporting band, not to the 10% accent. The accent is reserved for brand and primary action.

Can I use a 70-20-10 or 50-40-10 split instead? Yes. The rule is a heuristic, not a constant. The thing that matters is that one color dominates and one color is rare enough to function as an accent. The middle band is the most flexible — design systems with strong typography often shrink it to 20% because the type itself acts as the visual rhythm.

How do I pick which of my brand colors is the 10%? The accent should be the color you want users to associate with action. If you have multiple brand colors, run a quick test: pick the one that, when shown on a button, makes you want to click it. That's your accent. The others become part of your secondary band.

Does this work in light mode too? Yes — flip the dominant to a near-white (#fafafa rather than #fff), the secondary to a soft gray, keep the accent as-is. The proportions don't change. Most of our example palettes are dark-first because that's where modern teams ship, but the rule is colorspace-agnostic.