The 60-30-10 Color Rule for Balanced Design

The 60-30-10 color rule is the simplest reliable trick for making a palette look intentional instead of chaotic: use one color for 60% of the space, a second for 30%, and a sharp accent for the final 10%. Borrowed from interior design, it works just as well for websites, brand systems, slide decks, and packaging. This guide shows how to assign the proportions, why the ratio works, and how to apply it without making everything look the same.

If you have not nailed down which colors belong together yet, start with our color theory basics guide to build a harmonious palette first — the 60-30-10 rule governs how much of each color to use, not which colors to pick.

What the three numbers mean

The rule splits your visible color into three roles, each with a job:

• 60% — the dominant color. The base of the design. On a website this is usually the background and large surfaces. It sets the overall mood and is often a neutral or a muted version of the brand color.
• 30% — the secondary color. Supports and contrasts the dominant. Think section backgrounds, cards, navigation bars, or large blocks of supporting content.
• 10% — the accent color. The attention-grabber. Buttons, links, highlights, key calls to action. It is small on purpose — that is what makes it pop.

The genius is in the imbalance. If you gave each color equal weight, the eye would have nowhere to rest and nothing to focus on. The 60-30-10 split creates a clear visual hierarchy: a calm base, a supporting layer, and a deliberate spark.

Why the ratio works

Balance in design rarely means “equal.” It means weighted so the eye moves in the order you intend. A dominant 60% gives the composition a stable foundation and breathing room. The 30% adds enough variation to keep things from feeling flat. The 10% accent has maximum impact precisely because it is scarce — scarcity is what reads as emphasis.

This is the same reason a single red button on an otherwise neutral page outperforms a page where everything is shouting. Restraint creates contrast, and contrast directs attention.

How to apply 60-30-10 to a website

A practical mapping for digital layouts:

Proportion	Role	Typical use on a page
60%	Dominant	Page background, whitespace, large neutral surfaces
30%	Secondary	Headers, footers, cards, sidebars, section bands
10%	Accent	Primary buttons, links, badges, key highlights

A common rookie mistake is making the brand’s boldest color the 60%. Saturated colors are exhausting at scale. More often the dominant should be white, off-white, or a desaturated tint, with the vivid brand color reserved for the 10% accent where it does the most work.

Building the three colors from one brand color

You do not need three unrelated colors. A clean approach is to derive all three from a single hue using lightness and saturation — which is far easier in HSL than in HEX. Our explainer on HEX, RGB, and HSL walks through exactly how to lighten and darken a color without shifting its hue.

1. Take your brand color as the accent (10%).
2. Create a very light, low-saturation tint of it for the dominant (60%).
3. Use a mid-tone or a complementary neutral for the secondary (30%).

This keeps the whole palette cohesive because every color shares DNA with the brand hue.

Applying the rule beyond websites

The 60-30-10 split travels well because it is about proportion, not medium. A few concrete translations:

• Presentations and slide decks. Dominant background (usually white or a dark neutral) is your 60%, your supporting brand color fills section dividers and chart elements at 30%, and a single accent highlights key data points and the one number you want remembered. This alone makes amateur decks look designed.
• Packaging. The base material or primary color is the 60%, a secondary band or panel is the 30%, and the logo or a “new” flash is the 10% accent that catches the eye on a crowded shelf.
• Social media graphics. A consistent dominant background across posts builds feed recognition; the accent drives the eye to the call to action. Reusing the same ratio across a series is what makes a feed look cohesive.
• Interior and physical spaces — where the rule originated: walls (60%), furniture and textiles (30%), accessories and art (10%).

A quick worked example

Say your brand color is a deep teal, #0d7377. Here is a clean 60-30-10 build for a landing page:

1. 60% dominant: a near-white off-tint, #f7fafa — barely teal, mostly neutral. This is the page background and whitespace.
2. 30% secondary: a soft gray, #e2e8e8, for cards, the footer, and a feature band. It separates sections without competing.
3. 10% accent: the full teal, #0d7377, reserved for the primary button, links, and one or two highlights.

Notice the vivid brand color appears the least. That restraint is the entire point — the teal feels intentional and premium precisely because the page is not drowning in it.

Common mistakes and how to avoid them

• Treating it as exact math. 60-30-10 is a guideline, not a measurement. Aim for the feel — roughly two-thirds, one-third, a sliver — not pixel-perfect percentages.
• Over-using the accent. The moment the 10% creeps to 25%, it stops being an accent and the hierarchy collapses. If everything is highlighted, nothing is.
• Ignoring contrast. A balanced ratio still has to be legible. Make sure your accent buttons and text clear WCAG thresholds — see our guide to color contrast accessibility.
• Forgetting neutrals count. White and gray are colors in the ratio. Whitespace is usually doing most of your 60%.

When to break the rule

The 60-30-10 rule is a starting structure, not a cage. Bold, expressive brands sometimes run a near-monochrome 90-10 split for drama, or add a fourth minor color (turning it into 60-30-10-plus-a-pop). The point of learning the rule is to know why a layout feels balanced, so when you deviate, you are doing it on purpose rather than by accident.

Frequently Asked Questions

What is the 60-30-10 rule in design?

It is a color-proportion guideline: use a dominant color for about 60% of a design, a secondary color for 30%, and an accent color for the remaining 10%. The uneven split creates visual balance and hierarchy, guiding the viewer’s eye toward the small, high-impact accent.

Does the 60-30-10 rule include white and neutrals?

Yes. Neutrals count as colors in the ratio, and whitespace usually makes up most of the dominant 60%. A white or off-white background, a gray secondary layer, and a single bright accent is a textbook, professional application of the rule.

Which color should be the 10% accent?

Choose your most saturated or attention-grabbing color as the accent — often the core brand color. Because it appears in only about 10% of the design, it draws the eye to important elements like buttons and links without overwhelming the layout.

Can I use the 60-30-10 rule with more than three colors?

Yes. You can split the 30% or 10% into closely related shades, or add a small fourth color as a secondary accent. The core idea stays the same: keep one color dominant and reserve a small proportion for high-impact accents so the hierarchy holds.