.png?table=block&id=21f105a2-9d95-8120-a757-defc4d657b94&cache=v2)
Tags Synced
Tags Synced
Last Edited Time
Jul 2, 2025 04:23 PM
Do not index
Do not index
Platform
Web Design
Category
Design Theory
Topic
Colour Theory
AI summary
Apply the 60-30-10 colour rule in web design: use 60% for a dominant neutral colour, 30% for a secondary colour, and 10% for an accent colour to create balance and visual hierarchy. Adjust ratios as needed for your brand while ensuring clarity and focus in your design.
Last edited by
Related Synced
Related Synced
The 60-30-10 Colour Rule for Web Design
Tags: Web Design, Colour Theory, Design Tips, Website Aesthetics, User Experience, Graphic Design
Quick Summary
- Use 60% for your dominant colour (usually neutral)
- 30% goes to your secondary colour for supporting elements
- 10% is your accent colour for highlights and calls-to-action
- This split creates natural balance and visual hierarchy
- You can adjust the ratios slightly to suit your brand
What is the 60-30-10 Rule?
The 60-30-10 rule is a colour theory principle that takes the guesswork out of creating balanced colour schemes. Interior designers have used it for decades, and it works just as well for websites.
Instead of wondering whether your colours work together, you follow a simple formula that distributes colour across three levels:
60% - Your Dominant Colour
This covers the largest areas of your site, typically backgrounds and main content areas. Choose something neutral or very subtle here. Think whites, light greys, or soft beiges. This colour needs to be easy on the eyes because people will see a lot of it.
30% - Your Secondary Colour
This supports your main colour and appears in smaller sections like navigation bars, sidebars, or section backgrounds. It should complement your dominant colour whilst adding some visual interest.
10% - Your Accent Colour
This is your standout colour for buttons, links, icons, and anything you want people to notice. Despite being the smallest percentage, it often has the biggest impact on your design.
How to Apply This to Your Website
Start with your dominant colour. Look at your website and identify what takes up the most space. Your main background, content areas, and large sections should use this colour. Keep it subtle.
Add your secondary colour. This might be your header background, footer, or alternate section backgrounds. It should feel natural next to your dominant colour without fighting for attention.
Choose your accent strategically. This colour appears on your most important elements: your main call-to-action buttons, key links, or notification badges. Make it count.
Test everything. Check your colours on different devices and in various lighting conditions. What looks perfect on your laptop might look completely different on a phone screen.
Common Questions
Does this work for every type of website?
Yes, it's flexible enough for any site. A minimalist portfolio might use very subtle variations, whilst an e-commerce site might push the contrast further. The principle stays the same.
Can I bend the rules?
Absolutely. The exact percentages aren't set in stone. You might use 70-20-10 or 50-35-15. The key is maintaining that hierarchy where one colour dominates, another supports, and the third provides highlights.
What if my brand has more than three colours?
Treat similar colours as one group. If you have three shades of blue, they might all count as your "secondary" colour family. The rule is about balance, not limiting your palette.
Key Terms
Colour scheme - The selection of colours used consistently throughout a design
Saturation - How intense or vivid a colour appears
Neutral colours - Colours like white, black, grey, and beige that pair well with almost anything
Visual hierarchy - The arrangement of elements to show their order of importance
Why This Works
This rule works because it mirrors how our eyes naturally process information. We need areas of rest (the 60%), areas of interest (the 30%), and focal points (the 10%).
Without this balance, websites can feel chaotic or boring. Too many competing colours create visual noise. Too few colours create monotony. The 60-30-10 split hits the sweet spot.
Remember, good colour choices support your content rather than overwhelming it. This rule gives you a framework to build on, but your specific brand and audience should always guide your final decisions.
Cover image url: "/assets/images/design/60-30-10-color-rule.webp"