The 60-30-10 Color Rule: A Simple Formula for Balanced Designs

You picked three colors you like, but the page still feels chaotic: the brand color is everywhere, nothing stands out, and buttons compete with headings. The 60-30-10 color rule fixes this by deciding not just which colors you use but how much of each. This guide explains the rule, shows how to map it onto real web layouts with HEX codes and CSS, and covers the mistakes that make it fail.

What Is the 60-30-10 Color Rule?

The 60-30-10 rule is a color proportion guideline usually credited to interior design. A room uses a dominant color on walls and large surfaces, a secondary color on furniture and textiles, and an accent on small objects like cushions or art. Translated to screens:

• 60% dominant: the color that covers most of the visible area and sets the overall tone.
• 30% secondary: a supporting color that creates structure and contrast with the dominant one.
• 10% accent: a small, high-contrast color that tells people where to look and what to click.

The percentages describe visual area, not the count of elements. One full-width hero section in your secondary color can outweigh fifty small icons. Treat the numbers as approximate ratios, not something to measure with a pixel counter.

Why These Proportions Work

The rule works because it forces hierarchy. When one color clearly dominates, the eye has a resting place, and the layout feels calm. The secondary color introduces enough variety to separate regions, such as navigation from content. The accent works precisely because it is rare: a color that covers a tenth of the page or less becomes a signal instead of decoration.

Compare that with an even split. When three colors each take a third of the screen, none of them leads, and the design feels busy even if every color is attractive on its own. That is one of the most common reasons pages end up looking unpolished, as we cover in why your website colors look cheap.

How to Apply the 60-30-10 Color Rule in Web Design

On interfaces, the dominant 60% is almost always a neutral. Large fields of saturated color are hard to read on and tiring over long sessions. Here is a typical mapping:

Your brand color can sit in either the 30% or the 10% slot. A calm, corporate brand might use a deep brand blue for the header and footer and a warm accent for buttons. An energetic consumer brand might keep structure neutral and let the bright brand color be the 10% accent.

Body text, borders and dividers are usually treated as part of the neutral system rather than as their own slice. They need contrast more than they need personality.

A Worked Example With HEX Codes

Here is a light theme for a SaaS marketing site built on the rule:

• 60%: off-white #F8FAFC for page and card backgrounds.
• 30%: slate navy #1E293B for the header, footer, pricing section band and headings.
• 10%: burnt orange #C2410C for primary buttons, links and the active nav underline.

These pairings hold up on contrast: body text in #334155 on the off-white is about 9.9:1, white text on the navy is about 14.6:1, and white text on the orange button is about 5.2:1, which passes WCAG AA for normal text (4.5:1). A brighter orange such as #F97316 would look punchier but only reaches about 2.8:1 with white text, so it fails.

:root {
  /* 60: dominant */
  --color-bg: #F8FAFC;
  --color-text: #334155;
  /* 30: secondary */
  --color-secondary: #1E293B;
  /* 10: accent */
  --color-accent: #C2410C;
  --color-accent-hover: #9A3412;
}

.site-header,
.site-footer { background: var(--color-secondary); color: #FFFFFF; }
.btn-primary { background: var(--color-accent); color: #FFFFFF; }
.btn-primary:hover { background: var(--color-accent-hover); }
a { color: var(--color-accent); }

Because the orange appears only on things you can click, users quickly learn that orange means action. If you later add orange to illustrations and badges, that signal weakens.

Adapting the Rule for Dark Mode and Complex Interfaces

Dark mode

The proportions stay the same, but the values change. The 60% becomes a dark surface, the 30% a slightly lighter elevated surface, and the accent is lightened so it keeps contrast against dark backgrounds:

• 60%: #0F172A for the page background.
• 30%: #1E293B for cards, nav and panels.
• 10%: #FB923C for buttons and links, with dark #0F172A text on buttons (about 7.9:1).

The Light and Dark Theme Previewer shows an accent in side-by-side light and dark mock UIs, lightens it for the dark theme, and outputs CSS custom properties for both. For deeper guidance, read how to build a dark mode palette that still feels premium.

Dashboards and apps

Product interfaces need more than three colors: success, warning, error and info states, chart series, and hover or disabled variants. Keep the 60-30-10 structure for the shell (backgrounds, navigation, primary actions) and treat semantic and data colors as a small functional layer on top. Some designers formalize this as 60-30-5-5, splitting the accent slice between the action color and status colors.

Common Mistakes When Using Color Proportion

• Using the brand color as the 60%. A fully saturated background behind long text is tiring and makes the accent hard to pick out.
• Counting elements instead of area. Ten small orange icons may cover less space than one orange banner, but the banner is what changes the balance.
• Letting the accent creep. Every time the accent is used for decoration, it becomes less effective as a call to action.
• Choosing a secondary that is too close to the dominant. If the 30% barely differs from the 60%, the layout loses structure. Aim for a clear lightness difference.
• Ignoring contrast. Proportion does not guarantee readability. Check text on every background it appears on.

Build a 60-30-10 Palette in Minutes

You do not need to invent all three colors from scratch. A practical workflow:

1. Start from one base color. Enter it in the Color Palette Generator and choose a scheme. It returns five roles (Primary, Secondary, Accent, Dark neutral and Light neutral) with neutrals tinted toward your base hue, plus CSS custom properties.
2. Map the roles. Light neutral becomes your 60%; Dark neutral or Secondary becomes your 30%; Primary or Accent becomes your 10%, depending on which you want users to click.
3. Create interaction states for the accent. The Button Color Generator produces default, hover, active, focus ring and disabled states and picks white or near-black text by contrast.
4. Verify every text pairing in the Color Contrast Checker against AA (4.5:1 normal, 3:1 large) or AAA (7:1 normal, 4.5:1 large).
5. Review a real page. Squint at a full screenshot or blur it. You should see one dominant field, clear secondary structure, and a few accent points.

If you are unsure which hues belong together in the first place, our complete guide to color theory explains the harmony schemes, and color psychology in web design helps you choose a mood.

Conclusion

The 60-30-10 rule is a simple way to turn a list of colors into a balanced design. Let a neutral dominate, use a secondary color for structure, and keep the accent rare enough that it always means something. Adjust the exact percentages to suit your layout, keep semantic colors small and functional, and check contrast at every step. The numbers are a guide; the goal is a clear hierarchy that people can read at a glance.