The 60-30-10 Color Rule

What the 60-30-10 rule actually means

The 60-30-10 rule divides a color palette into three proportional roles. Sixty percent of any design, page, or branded surface uses the dominant color — typically a neutral that sets the mood without demanding attention. Thirty percent goes to a secondary color that supports the dominant without competing with it. The remaining ten percent is your accent: the color that makes people look, click, or act.

The rule originally came from interior design — where it describes how to balance color across walls, furniture, and accent pieces. But the underlying logic translates perfectly to brand systems: any visual environment needs a base, a complement, and a focal point. The moment you break that hierarchy, the eye doesn't know where to go.

The three color roles in a brand system

The 60% — Dominant (Base)

This is your background, your canvas, your default surface. It occupies the largest visual real estate in any layout. For most brands, the dominant color is either a neutral (white, off-white, dark navy, charcoal) or a very desaturated version of the brand's primary hue. It shouldn't compete for attention — its job is to make everything else legible.

A common mistake is making the brand's hero color the dominant. If your brand color is a saturated purple or electric blue, using it as 60% of every layout is visually exhausting. Instead, treat it as the accent and let a neutral carry the base.

The 30% — Secondary (Supporting)

The secondary color creates visual interest and separation without introducing chaos. It shows up in sidebars, section backgrounds, cards, headers, and anywhere you need to delineate structure without using the accent color. It should be harmonious with the dominant — either a related hue, a shifted tint, or a complementary neutral that sits comfortably next to it.

In digital brand systems, the secondary color often handles interactive states, hover effects, and section differentiation. It's the color that says "this area is different" without screaming for attention.

The 10% — Accent (Action)

This is the color that does the work. CTAs, links, badges, highlights, notification dots, active states — the accent color appears sparingly and precisely where you need the eye to land. Because it occupies only 10% of the visual space, it retains its stopping power every time it appears. Overuse kills it: the moment your accent color covers 40% of a layout, it stops being an accent and starts being wallpaper.

Well-known examples: Notion uses a blue accent against a near-white dominant. Linear's iconic purple is used almost exclusively as an accent against dark backgrounds. Figma's gradient is used sparingly — most of the interface is neutral gray.

How to choose your three colors

Choosing colors for a brand isn't about picking your favorites. It's about selecting hues that perform the right job in their role, work together at the ratios they'll actually be used at, and carry the right emotional signal for the audience and category.

Start with your audience's context, not a mood board

Before you open a color picker, ask: what does the visual landscape of your category look like? If everyone in your market uses the same deep blue trust-signal, that color either blends you in or, if used differently, gives you contrast against category norms. Your dominant color decision should account for the environment your brand will appear in, not just how it looks in isolation.

Test the palette at actual ratios

Most palette tools show three swatches side by side at equal sizes. That's not how a palette is experienced. Build a quick mockup — a card, a landing page section, a social template — that uses the colors at 60/30/10 proportions and evaluate it there. Colors that look great as swatches often clash or flatten at their intended ratios.

Check accessibility before committing

Your accent color needs sufficient contrast against both the dominant and secondary backgrounds. WCAG AA requires a 4.5:1 contrast ratio for normal text, 3:1 for large text. This isn't optional — a beautiful brand color that fails contrast is unusable in real-world interfaces and documents.

Applying 60-30-10 across a brand system

A brand color palette doesn't live on a single page — it lives across every surface, from your website to sales decks to social templates to physical signage. The 60-30-10 rule gives each output a consistent visual logic even when the specific layouts vary widely.

Web and digital interfaces

On web: dominant = page background and large content areas. Secondary = navigation, sidebar, section dividers, card surfaces. Accent = primary CTAs, active link states, alerts, badge colors. Follow this consistently and every page will feel like it belongs to the same system without looking identical.

Marketing and social content

Social templates and ad creatives are where color discipline breaks down fastest. Without a clear rule, designers default to "make it pop" and start stacking saturated colors against each other. A 60-30-10 template structure gives every creator — in-house, agency, or AI-assisted — a constraint that produces on-brand output regardless of who made it.

Presentations and documents

Decks and proposals are where most brand color rules get abandoned. Apply the same logic: slide background is 60%, section color and table fills are 30%, key data callouts and highlight boxes are 10%. The result looks designed even when built in a hurry.

The most common mistakes

Too many accent colors

Every color added to the accent role dilutes all of them. Two accents means neither one commands the eye reliably. Pick one and protect it.

Using the brand hero color as the dominant

Saturated brand colors at 60% are visually fatiguing. Save them for the accent role where they retain their energy.

Inconsistent ratios across surfaces

The rule breaks down when web, social, and print use different proportions. The system needs consistent color role definitions, not just a shared palette.

Ignoring dark mode

In a dark-mode palette, the dominant is typically a dark neutral. The secondary and accent roles remain structurally the same — but the specific hues often need adjustment to maintain the right contrast relationships.

Changing the accent for every campaign

Seasonal or campaign-specific accent colors destroy brand recognition over time. Campaigns can use the accent in different ways, but changing the actual hue regularly fragments the visual identity.

Where color rules break down in real brand execution

The 60-30-10 rule solves the design problem. It doesn't solve the execution problem — which is that most teams don't have a mechanism to enforce color roles across contributors, tools, and channels. The palette gets defined in a brand guide that lives in a PDF. Six months later, a designer in a different timezone builds a template using the wrong proportion, and nobody catches it until after launch.

This is the gap between brand strategy and brand execution. A color rule is only as good as the system that enforces it. The most disciplined brand systems — the ones where visual identity actually compounds over time — treat color roles as governance constraints, not aesthetic suggestions.

The 60-30-10 rule is the right place to start. A brand operating system is what keeps it consistent after the first 90 days.

Quick reference

→60% — Dominant: backgrounds, large surfaces, the default canvas
→30% — Secondary: structural separation, cards, navigation, section fills
→10% — Accent: CTAs, highlights, interactive states, the attention-grabber
→Test colors at actual ratios, not as equal swatches
→Verify WCAG AA contrast (4.5:1) between accent and all backgrounds
→One accent color — protect it from dilution across campaigns
→Define color roles in your system, not just color values in a guide

A color rule is only as good as the system that enforces it

Brandhorse OS turns brand decisions — including color roles — into governed execution rules that every output has to satisfy before it ships.

See how it works