ToolBoxes

The 60-30-10 Color Rule for Web Design: A Practical Guide

May 28, 20267 min read

What Is the 60-30-10 Rule?

The 60-30-10 rule is a classic proportion guideline from interior design, adapted for web design. It divides your color usage into three roles:

  • 60% — Dominant color: Backgrounds, large areas, the overall feel
  • 30% — Secondary color: Navigation, sidebars, cards, sections
  • 10% — Accent color: CTAs, links, highlights, alerts

This ratio creates visual balance. The dominant color provides foundation, the secondary adds structure, and the accent draws attention where it matters.

Why It Works

Human perception prefers hierarchy. When every color competes for attention, the result is visual noise. The 60-30-10 rule enforces a clear ordering:

  • Your eye first lands on the accent (10%) — that is intentional
  • Then it absorbs the structure defined by the secondary (30%)
  • Finally, it rests on the dominant backdrop (60%)

Without this hierarchy, users cannot quickly identify what is important on the page.

Applying It to Web Interfaces

Mapping Colors to UI Elements

ProportionRoleUI Elements
60%DominantPage background, hero backgrounds, body text on background (if dark UI)
30%SecondaryNavbar, footer, card backgrounds, sidebar, section backgrounds
10%AccentButtons, links, badges, icons, active states, form focus rings

Example: SaaS Dashboard

A modern SaaS dashboard might use:

:root {
  /* 60% — Dominant: Off-white */
  --color-bg: #F8FAFC;
  /* 30% — Secondary: Slate gray */
  --color-surface: #334155;
  /* 10% — Accent: Blue */
  --color-accent: #3B82F6;
}

The page background fills most of the viewport (60%). The sidebar and navbar use the dark slate (30%). CTAs and active elements pop in blue (10%).

Dark Mode Version

:root.dark {
  /* 60% — Dominant: Dark navy */
  --color-bg: #0F172A;
  /* 30% — Secondary: Darker surface */
  --color-surface: #1E293B;
  /* 10% — Accent: Brighter blue for dark backgrounds */
  --color-accent: #60A5FA;
}

Common Mistakes

Mistake 1: Counting the Logo as Accent

Your brand logo might use a bold color, but if it sits in the navbar (secondary zone), it does not count toward the 10% accent allocation. The rule applies to visible area, not number of elements.

Mistake 2: Multiple Accent Colors

Some designs use blue for primary buttons and green for success states. That is fine — but both together still need to occupy roughly 10% of the visual area. If your accents dominate more than 10%, reduce the accent usage or merge accent roles.

Mistake 3: Ignoring Text Color

Body text color is part of the ratio. On a light background, dark text might dominate far more than 10%. Consider your text color part of the dominant or secondary zone, not an extra layer.

Adapting the Rule

The 60-30-10 ratio is a guideline, not a law. Common adaptations:

  • 60-30-5-5: Split the accent into two colors for primary actions vs. success/error states
  • 70-20-10: Push more toward minimalism with a very dominant neutral
  • 50-30-20: For bold, brand-forward designs with more accent presence

The key is maintaining hierarchy — whatever ratio you choose, there should be a clear dominant, secondary, and accent distinction.

Building a 60-30-10 Palette

  1. Choose your dominant: Start with a neutral — white, off-white, light gray, or a dark shade for dark mode
  2. Pick your secondary: Select a color that contrasts with the dominant but does not compete with the accent — typically a muted or darker shade
  3. Select your accent: This should be the most saturated color in your palette. It needs to stand out against both dominant and secondary

Use our Color Palette Generator to create harmonious palettes and see them applied to a sample layout.

Using CSS Custom Properties

:root {
  --color-dominant: #F8FAFC;
  --color-secondary: #334155;
  --color-accent: #3B82F6;
}

body {
  background-color: var(--color-dominant);
  color: var(--color-secondary);
}

.btn-primary {
  background-color: var(--color-accent);
  color: white;
}

Key Takeaways

  • The 60-30-10 rule divides color into dominant (60%), secondary (30%), and accent (10%) roles
  • Hierarchy guides the eye: accent draws attention, secondary provides structure, dominant sets the foundation
  • Map proportions to UI zones: backgrounds, surfaces/navigation, and interactive elements
  • Text color counts toward the ratio — do not treat it as a separate layer
  • Adapt the ratio to your brand (60-30-5-5, 70-20-10) but always maintain clear hierarchy
  • Build palettes starting with the dominant neutral, then secondary, then the most saturated accent

Try It Yourself

Generate balanced palettes with proportion previews using our Color Palette Generator. See how dominant, secondary, and accent colors look together before committing.