The 60-30-10 Color Rule: How to Use It for Web & Brand Design

What is the 60-30-10 Rule?

The 60-30-10 rule is a simple proportion recipe for color: about 60% of what people see should read as one dominant color (usually your lightest neutral or main brand field), 30% as a secondary color that structures navigation, sidebars, cards, or typography blocks, and 10% as accent for the few things that must pop—primary buttons, active states, badges, and key illustrations. It is not a law of physics; it is a guardrail against the most common failure mode in both web UI and print branding, which is “everything is equally loud.”

The strip below repeats the idea with the same professional hex trio you will see again in the examples section: #F5F5F5 covers most canvas area, #1E3A8A carries headers and component chrome, and #FFD700 appears only where you want a single unmistakable focal point. On a real page, the 60% is not always “one giant rectangle”—it is the cumulative area of backgrounds, whitespace tinted toward that hue, and large photography graded to feel neutral against it.

Why It Works

Human vision settles on luminance patterns before it parses hue. When roughly six-tenths of a layout shares a similar lightness and low chroma, the eye treats it as “ground,” freeing attention for the third of the layout that introduces a second family—slightly darker, more saturated, or cooler—and for the small accent sliver that carries the highest chroma. That sequence matches how we scan: background first, structure second, action last. Color theory calls this simultaneous contrast: a small saturated patch looks more intense against a calm field than it does when surrounded by competing brights.

The rule also mirrors how brands behave in the wild: packaging might whisper with kraft or white (dominant), repeat a signature blue on every panel (secondary), and reserve metallic gold or neon for the logo lockup (accent). On the web, the same logic prevents marketing from shipping rainbow landing pages while product ships monochrome dashboards—if both follow 60-30-10 with the same three hex roles, the brand feels coherent even when layout density differs.

How to Apply It to a Website

Start by assigning one hex to the 60% role for your default light theme. For a corporate marketing site, that is often #F5F5F5 (light gray) on the outer canvas plus white #FFFFFF inside content wells—count both toward “dominant neutrals” so photography and copy breathe. Next, map 30% to structure: here #1E3A8A (navy) for the sticky header, footer band, icon strokes, and heading text on pale backgrounds. Finally, lock 10% to #FFD700 (gold) for the single primary CTA per viewport, active tab indicators, and maybe one chart series—never for long paragraphs of body copy.

1. Audit area. Sketch or screenshot your homepage and estimate cumulative fill: hero, backgrounds, and white cards usually land near 60% neutrals.
2. Merge similar hues. Two grays that read as “off-white” should share one token so you do not accidentally spend 40% on near-duplicates.
3. Route components to roles. Navigation, H2 blocks, and secondary buttons consume the 30% navy; destructive actions stay out of the gold accent unless brand intentionally conflates them.
4. Accent budget. If marketing adds a second “accent” for a campaign, temporarily demote gold to 5% and treat campaign color as the other 5%—still roughly 10% total chroma budget.
5. Verify readability. Gold fills behind small labels often fail contrast; pair gold with #1E293B text or add an outline. Run final pairs through our contrast checker so your 10% accent stays legible for every state, including hover and focus rings.

In CSS terms, you might expose --color-dominant, --color-secondary, and --color-accent with those hex values, then forbid components from introducing a fourth saturated family without a design review. That is how a proportion rule becomes an engineering contract.

How to Apply It to a Brand

Brand guidelines should name the three roles explicitly, not only “primary / secondary.” Dominant might be paper white and warm gray in print; secondary might be your wordmark blue across uniforms, slide decks, and app chrome; accent might be foil gold or a neon reserved for packaging stickers. The percentages shift medium by medium—an Instagram story might show 80% photography—but the rank order stays: one calm field, one structural brand color, one spark.

When agencies hand off fifteen hex codes “for flexibility,” product teams improvise. Collapse those into three parents plus neutrals, then derive tints algorithmically for hover states. If leadership insists on a rainbow sub-brand, quarantine it inside illustrations or seasonal packaging so the digital core still reads 60-30-10. Consistency beats novelty for recognition; novelty belongs in the 10% lane or outside the system entirely.

On pitch decks, enforce the same ratio: title slides can be 60% white, 30% brand navy in typography and shapes, 10% gold rule lines. Inside spreads, photography may temporarily dominate—treat the photo as part of the 60% neutral story if it is desaturated, or as a planned “accent excursion” if it is vivid, then return to the triad on the next page so the deck still feels like one system. Voice-and-tone documents rarely mention color; adding a single page that maps copy intensity to color roles closes the gap between writers and designers.

3 Example Palettes Using 60-30-10

Each card shows proportional swatches (60 / 30 / 10 width) with full hex codes—copy them into Figma styles or CSS variables as starting points.

• Professional — navy, light gray, gold

  Dominant light gray keeps forms and whitepapers calm; navy carries authority; gold signals premium CTAs without painting entire heroes yellow.

  60%#F5F5F5

  30%#1E3A8A

  10%#FFD700

• Earthy — cream, sage, terracotta

  Cream dominates for hospitality and wellness; sage structures navigation and dividers; terracotta marks actions and seasonal tags.

  60%#FFFDD0

  30%#B2AC88

  10%#E2725B

• Modern — white, charcoal, electric blue

  White-dominant SaaS chrome; charcoal for text and sidebars; electric blue strictly for links, primary buttons, and data highlights.

  60%#FFFFFF

  30%#2D3748

  10%#0066FF

Common Mistakes

Mistaking “brand blue” for dominant. Teams paint 60% of the UI in saturated blue because the logo is blue, then wonder why charts and photography look muddy. Let blue live in the 30% lane unless you are deliberately building a blue-world product (some dev tools can).

Splitting the accent. Five accent colors at “only 2% each” still reads as chaos because chroma attracts the eye. Merge marketing requests into one campaign accent or rotate them seasonally, not simultaneously.

Ignoring dark mode. The same ratio applies, but dominant becomes near-black #0F172A, secondary softens to a desaturated navy or charcoal, and accent saturation may need to drop slightly to avoid halation on OLED.

Treating photography as exempt. If hero images introduce four new hues at full saturation, they consume your accent budget visually. Grade photos toward your dominant temperature or add a translucent scrim keyed to your 60% hue so the rule still holds at a glance.

FAQ

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

A proportion guide: roughly 60% dominant color, 30% secondary, 10% accent, used to balance web pages, apps, and brand applications.

Do the percentages need to be exact?

No—eyeball cumulative area and chroma. The goal is clear hierarchy, not measuring pixels with a ruler.

Can I use two accent colors?

Only if they still fit the ~10% visual budget together; otherwise demote one to illustrations or swap by section.

Does 60-30-10 guarantee accessible contrast?

No—test every text and control color with a contrast checker. Dominant and accent choices still need WCAG-compliant pairings.

Related reads: Navy blue hex reference, Sage green hex codes, and how to check color contrast for WCAG depth beyond proportion alone.