The 60-30-10 color rule started as an interior design trick: 60% dominant color, 30% secondary color, 10% accent. It is the fastest way to stop a room (or a homepage) from looking like a paint sample catalogue. On the web, the same ratio works even better, because a screen has a built-in job to do: guide the eye to a button.
This guide explains the rule in plain terms, then translates it into concrete hex values, a homepage layout map, and the specific mistakes that make call-to-action buttons disappear.
What is the 60-30-10 color rule?
The 60-30-10 color rule is a proportion guideline for building a balanced color scheme with three colors:
- 60% dominant color: sets the overall mood and covers the largest surfaces.
- 30% secondary color: supports the dominant color and creates separation between areas.
- 10% accent color: the smallest share, used to draw attention.
In a living room, that is walls, then sofa and curtains, then cushions and artwork. On a website, it is backgrounds, then section blocks and surfaces, then buttons and links. The percentages are about visible surface area, not the number of colors in your brand guidelines.
Why the ratio works on screens
Human attention follows contrast. If 90% of a page is calm and 10% is visually loud, the loud part becomes a signal. If half the page is loud, nothing is a signal anymore and users start scanning randomly. The 60-30-10 split is essentially a hierarchy budget: you are rationing attention so the accent color still means "click here".
Translating 60-30-10 to a web interface
Here is the mapping we use at PixelBright when we build a design system from a brand palette:
| Share | Role | Where it lives on a page |
|---|---|---|
| 60% | Dominant / canvas | Page background, card surfaces, white space between sections |
| 30% | Secondary / structure | Alternating section bands, hero panel, footer, navigation bar, image blocks, headline text |
| 10% | Accent / action | Primary buttons, text links, active states, badges, icon highlights, progress indicators |
Important nuance: the 60% is almost never your most saturated brand color. On the web, the dominant color is usually a near-white, a light tint, or (in dark mode) a deep neutral. Brands that try to paint 60% of a page in a vivid brand blue end up with an interface that feels like a landing page from 2009 and a button that has nowhere to shine.
Three ready-to-use hex palettes
1. SaaS / B2B (cool and credible)
| Share | Hex | Usage |
|---|---|---|
| 60% | #F7F9FC + #FFFFFF | Page canvas and white cards on top of it |
| 30% | #1B2A4A | Hero band, footer, headings, icon fills |
| 10% | #FF6B35 | Primary buttons, links, active nav underline |
| Text | #2E3440 / #5A6472 | Body copy and muted captions |
2. E-commerce (warm and premium)
- 60%: #FFFDF8 (warm off-white canvas, keeps product photos clean)
- 30%: #2F4A3F (forest green for the header, category bands and footer)
- 10%: #D9A227 (gold for "Add to cart", sale badges, star ratings)
- Support neutrals: #EDE7DC for dividers, #1F231F for text
3. Dark mode (portfolio or product app)
- 60%: #0E1116 (deep neutral background)
- 30%: #1B2129 (elevated cards, panels, code blocks, nav)
- 10%: #4FD1C5 (accent for buttons, links, focus rings)
- Text: #E6EAF0 primary, #9AA4B2 secondary
Notice that in each palette the accent is the only color with high saturation. That is the whole trick.
Homepage breakdown: where each color goes
Using the SaaS palette above, here is how a standard homepage splits out:
| Section | Background | Accent usage (10%) |
|---|---|---|
| Sticky header | #FFFFFF | One #FF6B35 button ("Start free trial"), nothing else |
| Hero | #1B2A4A (30% color) | Primary CTA in #FF6B35, secondary CTA as a ghost button with a white border |
| Logo strip / social proof | #F7F9FC | None, greyscale logos only |
| Feature grid | #FFFFFF cards on #F7F9FC | Small accent detail inside icons (max one per card) |
| Testimonials | #F7F9FC | Accent quotation mark or rating stars |
| Pricing | #FFFFFF | Accent only on the recommended plan card (border + button) |
| Final CTA band | #1B2A4A | One full-width accent button |
| Footer | #1B2A4A (darker tint acceptable) | Accent on hover states for links only |
Add up the surfaces: the light canvas and white cards easily reach 60%, the navy bands and footer land near 30%, and the accent stays in the single digits. That is the rule applied, not just quoted.
How to check your ratio in two minutes
- Screenshot the full page at desktop width.
- Blur it heavily (or squint). You should see one calm field, one structural color, and a few small hot spots.
- Count the hot spots. If you count more than three or four accent zones per viewport, you are over budget.
- Scroll test on mobile. Each viewport should contain at most one primary action in accent color.
Common mistakes when applying 60-30-10 to websites
1. Using the accent color everywhere (the CTA killer)
This is the number one failure. The accent gets used for icons, list bullets, headline highlights, tags, borders, hover states and the button. The button no longer stands out, and click-through drops. Rule of thumb: one primary accent button per viewport. If a second action is needed, give it an outline or a neutral fill.
2. Making the brand color the 60%
A saturated brand color across 60% of a page fatigues the eye and leaves no contrast room for buttons. Keep the vivid brand color for the 30% or 10% slot and use a tint of it (for example #F7F9FC derived from #1B2A4A) for the dominant surface.
3. Forgetting that text is color too
Body copy, headings and captions occupy real surface area. Dark navy headings plus grey body text already contribute to your secondary share. Audit text before adding more colored blocks.
4. Ignoring contrast and accessibility
A pretty ratio with unreadable text fails. Check your combinations against WCAG: at least 4.5:1 for normal text, 3:1 for large text and for non-text elements such as button borders and focus rings. Yellow and light green accents on white are the usual offenders; darken the accent for text and keep the bright version for large fills only.
5. Using the accent on non-clickable elements
If the accent means "interactive", applying it to a decorative shape or a static stat teaches users to ignore it. Keep a strict contract: accent equals action.
6. Applying the ratio per section instead of per page
Each section does not need its own 60-30-10 split. The ratio is a page-level (and site-level) budget. Alternating section backgrounds is how you reach the 30% without noise.
7. Letting dark mode drift
Inverting a light theme rarely keeps the ratio intact. Dark surfaces make saturated accents glow, so reduce accent saturation by roughly 10 to 15% and shrink its surface area even further.
What about brands with four or more colors?
Plenty of brand palettes have five swatches. You do not break the rule, you nest it:
- 60%: one neutral canvas, optionally two very close tints (for example #FFFFFF and #F7F9FC). Close tints read as one color.
- 30%: one structural color, optionally with a darker variant for the footer.
- 10%: split it as 7% primary accent + 3% secondary accent for a specific job (success, sale, new).
Semantic colors (success green, warning amber, error red) sit outside the ratio because they appear situationally and in tiny amounts. Just make sure none of them looks like your primary CTA. Source: https://uxplanet.org.
A quick 60-30-10 checklist for your next build
- Pick the canvas first, not the brand color.
- Choose one structural color for bands, nav and footer.
- Choose one accent reserved for actions.
- Define text colors separately (primary, secondary, inverse).
- Set tokens in your design system so nobody improvises:
--surface,--surface-alt,--structure,--accent,--accent-hover. - Run a contrast audit on every accent-on-background pair.
- Blur-test the homepage, a product page and a form page.
- Count accent instances per viewport. Trim until the CTA is the loudest thing on screen.
Frequently asked questions
Is 60-30-10 a color theory rule?
Not exactly. Color theory deals with relationships between hues (complementary, analogous, triadic). The 60-30-10 rule deals with proportions. You still need color theory to pick harmonious hues, then the ratio tells you how much of each to use.
Is 60-30-10 the golden ratio?
No. The golden ratio is roughly 1:1.618 and is a mathematical proportion. 60-30-10 is a practical rule of thumb with no mathematical basis. It is popular because it is easy to remember and hard to get wrong. Reference: https://diamondvogel.com.
What is the 70-20-10 rule?
A stricter variant: 70% dominant, 20% secondary, 10% accent. It produces calmer, more minimal layouts and suits content-heavy sites, documentation and editorial designs. Same logic, larger canvas.
Do the percentages need to be exact?
No. Think 55 to 65, 25 to 35, 5 to 12. What matters is that the accent stays small enough to read as a signal.
Does the rule work for landing pages with lots of CTAs?
Yes, and it matters more there. Repeat the same button styled the same way at intervals rather than adding new colored elements. Repetition keeps the accent share low while giving users several chances to convert.
Where do gradients and images fit?
A gradient counts as whichever slot its colors belong to (usually the 30%). Photographs count as their dominant tone, which is why an image-heavy hero can quietly blow your ratio. Overlay a tint from your palette to bring it back in line.
Bottom line
The 60-30-10 color rule moved from interiors to interfaces because it solves the same problem: too many colors competing for attention. On a website, the reward is measurable. A disciplined ratio means a calm layout, clear structure, and a call-to-action nobody can miss. A comparable breakdown sits on sixtythirtyten.co.
Need a second pair of eyes on your palette or a design system built around it? The team at PixelBright audits color hierarchy as part of every web design project. Get in touch and we will blur-test your homepage for you.