The rule in practice
| Share | Role | Typical use on a website |
|---|---|---|
| 60% | Dominant | Backgrounds and large surfaces, often white or a light tint |
| 30% | Secondary | Headers, footers, section bands and headings in the brand color |
| 10% | Accent | Buttons, links and key highlights |
The numbers are approximate. Nobody measures pixels. The point is a clear hierarchy, where the accent is rare enough to draw the eye to actions.
Why the 10% matters most
The accent color does the most work for conversions. When only buttons and key links use it, visitors learn in seconds what they can tap. If the accent spreads across headings, icons and backgrounds, buttons stop standing out.
Contrast still applies. WCAG asks for at least 3 to 1 contrast for buttons and other interface parts. Normal text needs 4.5 to 1. A bright accent on white often fails for text, so check the button label too.
When to bend the rule
- Dark-themed sites flip the dominant color to a deep shade.
- Photo-heavy pages let images carry much of the 30%.
- Some brands need two accents, one for action and one for alerts.
Good example. A pest control site uses a white background, deep green for headers and section bands and a bright yellow only for call buttons.
Bad example. A site uses equal amounts of red, blue and yellow, so nothing leads the eye and the call button blends in.
Read how to choose a color palette for picking the colors themselves. Our web design team balances every palette this way before the first mockup.