Harnessing the 60-30-10 Colour Rule for Web Design Mastery
Category: Colour Theory, Web Design Fundamentals
By Elwyn Davies
Why This Matters
Deep breaths. If you've ever found yourself picking colours for a website and ending up with either a bland porridge or a retina-searing mess, you’re in very good company. Colour is the first thing users notice, long before they read a single word. It sets mood, makes brands memorable, improves readability, and, perhaps most crucially, directs user action. Get it wrong, and you risk confusion, misuse of precious white space, and users bouncing right back to their search results.
Bad colour decisions can bleed hours from your calendar: endless iterations, the same heated debates with clients (“It needs more pop!”), and last-minute panics when a button vanishes against the background. All of this costs you in time, your team's energy, or even your client’s sales. The 60-30-10 rule aims to put a stop to the chaos and provide clarity, not constraint. Using this rule, your next design is much less likely to go wrong and will stand out for all the right reasons.
Common Pitfalls
The mistake most designers (and clients, truth be told) make is treating colour as window dressing. They pick three favourite shades from the logo, slap them across the page, and hope for balance by luck. Often, they land in one of two camps:
- Everything is so neutral it borders on clinical, with all the personality of a tax office.
- Or the opposite: loud, colourful, and busy, every button and heading jostling for attention like tourists at a free buffet.
Another classic blunder is sticking too rigidly to the 60-30-10 advice, as if it’s some golden ratio to never be questioned. The result is a bland, formulaic layout with all the visual draw of a spreadsheet. The real skill is knowing how to use the rule as a framework, then breaking it just enough to make your design both practical and memorable.
Let’s get your colour choices working as hard as the rest of your design by putting the 60-30-10 rule to work properly.
Step-by-Step Fix
1. Decide Your 60% Foundation
Start with the backbone of your site: the background, main sections, and the larger “breathing space” areas. This should be your quietest, calmest colour. For the majority of modern websites, this means picking a neutral: soft white, cool grey, warm beige, or even a very muted pastel. The goal is to support your content, not fight with it.
Practical Example
Take a portfolio site. I’ll often use a white (#FFFFFF) or a pale grey (#F8F9FA) for clean professionalism. For a tech brand, a very dark blue or charcoal (#222C36) suits a dark mode vibe without swallowing the content.
Pixelhaze Tip
Check this base colour’s contrast on both mobile and desktop. Too light, and elderly users (or hungover designers) will struggle; too dark, and your pastel accent never stands a chance. Use a tool like WebAIM’s Contrast Checker to ensure accessibility isn’t an afterthought.
2. Layer in Your 30% Supporting Colour
With your sturdy base sorted, introduce a secondary colour for main navigation, cards, sidebars, and perhaps backgrounds on feature sections. This is where the personality builds up, not through the volume but through considered placement.
Practical Example
Let’s say your base is a calm off-white. Your 30% might be a brand blue (#2879F3) for navigation bars and section backgrounds, or a confident teal for info panels. If your site has a dark mode, your secondary could be a mid-toned blue-grey to break up the sections.
Pixelhaze Tip
Run a quick scan of your site, top to bottom. If your secondary colour starts to dominate, it becomes clear when everything begins to merge and there’s nowhere welcoming for the eye to rest. Aim for punch and polish, not a colour-fight.
3. Pick Your 10% Accent
This is where the 60-30-10 rule really moves the needle. That tiny 10% is reserved for highlights, so make sure it works hard. Calls to action, vital icons, notification badges, and small splashes (like link hovers) are perfect spots.
Practical Example
Sticking with the palette above: if your base is white and your secondary is blue, try a strong accent like orange (#FF7829) on CTAs and signposts. The contrast should be immediately obvious, so users can't help but notice where to click.
Pixelhaze Tip
Think like a minimalist. If everything is “special,” then nothing is. Limit your accent use strictly to actionable elements or indispensable information. If you’re highlighting more than three distinct component types with the accent, regroup and pare down.
4. Test and Tweak for Context and Brand
Look at your site as a living, breathing set of screens, not a static moodboard. Brands differ, and one size does not fit all. A charity’s website demands softer accents than an e-commerce landing page aiming for instant sales.
Practical Example
After testing, you might find your initially chosen orange is too aggressive for an eco-focused non-profit, where a gentle green would soothe rather than shout. Or perhaps the accent works beautifully on desktop but is barely visible in the mobile view. Tweak, then tweak again.
Pixelhaze Tip
View your design in greyscale (most operating systems let you toggle colour filters). If you can still spot important actions easily, you’ve hit a solid balance. This trick catches more accessibility problems than most automated tools.
5. Document Your Palette and Component Usage
Document your work—even as a solo designer, the benefits are real. Make a note of what each colour is for: backgrounds, secondary panels, accents. This stops subtle drift (“just this one button in purple won’t matter…”) from creeping in a week before launch.
Practical Example
A simple swatch guide:
- 60% Base: #F8F9FA (Backgrounds, section backgrounds)
- 30% Secondary: #2879F3 (Navigation, cards, key headings)
- 10% Accent: #FF7829 (Primary CTAs, alert badges)
Include this right in your project wiki, Figma library, or design system.
Pixelhaze Tip
If time’s tight, build out your colour scheme with a tool like Coolors or Adobe Color, and export directly into your style guide. Clients appreciate seeing structure, and it works as a training aid for anyone else working on the site.
6. Audit and Adjust as the Site Evolves
Design is always changing. As new features appear—such as extra landing pages, a new form, or a surprise blog—visit your palette and audit. Is the accent still special? Has the secondary become the default button by accident?
Practical Example
I once took on a legacy site that started with a tight scheme, but over two years, “special” accents became everything from plain links to decorative footers. We spent a week retracing and correcting, but it would have taken a day if we’d audited colours during each new feature build.
Pixelhaze Tip
Set a quarterly reminder to review your live site with fresh eyes (or, even better, rope in someone non-technical). Ask yourself if important actions leap out or if the design has drifted back to chaos. Small adjustments keep everything sharp without a major overhaul.
What Most People Miss
The 60-30-10 rule works as a framework, not a straitjacket. Designers often forget that this rule is about hierarchy rather than strict calculation. At times, a hero landing page may need a heavier hand with the accent for a temporary campaign. Alternatively, a minimalist brand might work better with a 70-20-10 ratio. The skill comes from learning when and why to tweak.
Another often-overlooked approach is letting the 10% accent serve as the main driver—not only for visual impact, but also as a signpost for behaviour. Many sites hide calls to action in “on-brand” colours that don’t contrast, and users simply don’t spot them. Smart use of accent colours supports higher conversions by guiding users without drawing attention to the design itself.
A subtle yet valuable habit: when in doubt, start dull. It’s much easier to add vibrancy to a calm palette than to dial it back after a design has turned overly bright. If you pause and think your colours are boring, you're probably close to the right amount of restraint.
The Bigger Picture
Sorting your colour ratios makes things clearer for you and your users. Visitors move from page to page, spotting buttons, links, and signposts instantly. Results show up in bounce rates dropping, fewer errors, and higher conversions.
Putting in the time to develop a thoughtful palette upfront saves hours in feedback cycles, handover documents, and those “can you just change this link to pink?” emails that multiply at a project’s close. Designers with a clear rationale for colour choices also earn more respect (and higher fees) from clients and stakeholders who see the method and value behind the choices.
As your projects increase in scale—from brochure site to e-commerce platform, from indie blog to SaaS dashboard—the 60-30-10 approach helps maintain consistency. Every new component fits seamlessly. Every update feels planned. This is how you become known for crisp, confident design that looks simple because it is. Achieving convincing simplicity is a mark of a true expert.
Wrap-Up
Colour is central to everything that works in web design—far from just a finishing touch. The 60-30-10 rule keeps things grounded: start with a strong base, add a contrasting complement, and use your accent colour sparingly on each page. Adjust as you grow, document your logic, and avoid the lure of universal formulas.
With time, you’ll spot the difference on every site you visit. More importantly, so will your users.
Want more helpful systems like this? Join Pixelhaze Academy for free at https://www.pixelhaze.academy/membership.
FAQs: The 60-30-10 Rule in Practice
How do I pick colours that work together?
Start with your key brand colour, then find a neutral base and a contrasting accent using free tools like Adobe Color or Coolors. For inspiration, check out British designers’ work or look at successful brands in your niche.
Must I always use exactly 60/30/10 proportions?
No. The rule guides structure, but feel free to adjust. If your site is heavily visual or unusually minimalist, tweak until it feels natural. Balance matters more than arithmetic.
What if my client insists on that awful shade of purple everywhere?
Document your palette with clear roles for each colour, then show side-by-side mockups. Most clients respond to seeing how “too much” can kill hierarchy and impact.
Are there accessibility concerns with 60-30-10?
Yes. Always test your combinations for sufficient contrast and use accessible patterns (e.g. not just colour to indicate status). Run the WAVE tool or WebAIM’s contrast checker as standard practice.
Can I see some real-world examples?
Absolutely.
- Pixelhaze’s own homepage uses a calm off-white base, deep accent blues for navigation, and a bright magenta-pink for CTAs (very much in the 60-30-10 spirit).
- Many well-designed charity sites use gentle beiges and greens as the base and secondary, then a bright orange for donate buttons.
Related Reading from Pixelhaze
- A Bit of a Shock: A Deep Dive into Bolt’s Rebrand and Web Design Overhaul: See how bold colour choices and sharp discipline reinvented a global brand.
- Colour Psychology in Web Design: Using Colour Theory to Guide User Behaviour: Taking your palette beyond the basics with real-world case studies.
- Web Design Rebranding: Lessons from Industry Leaders: Practical strategies from successful relaunches.
Elwyn Davies is the founder of Pixelhaze Academy and has spent far too many years matchmaking colours for brands of every shape and size. When not wrangling design systems, you’ll find him championing simple, honest usability (and avoiding purple, wherever possible).