The 60-30-10 Colour Rule for Web Design
TL;DR:
- Use 60% of your design for the main colour, usually neutral
- Allocate 30% to secondary colours for visual interest
- Designate 10% for accent colours that guide visitor actions
- This rule prevents colour overload and maintains balance
- It enhances the focus on key elements like buttons and headlines
The 60-30-10 rule is a colour structuring principle that divides your page's colour usage into manageable and effective proportions. Here's how to apply it:
60% Main Colour: This is your dominant hue, typically a neutral or subtle shade, forming the design's backdrop.
30% Secondary Colour: This portion adds depth with a complementary but distinct colour that supports the main hue.
10% Accent Colour: Reserved for vibrant colours that draw attention to calls to action and important features.
Why Use the 60-30-10 Rule?
Adopting this rule can transform your design process:
Prevents Colour Overload: Too many colours can clutter a design. Using three main colours in these proportions keeps things clean and organised.
Creates Harmony and Balance: This rule helps in distributing colours in a way that is aesthetically pleasing and easy on the eyes.
Highlights Key Elements: By using a distinct colour for just 10% of your design, you draw attention naturally to the most important parts of your page.
Pixelhaze Tip: Start with your 10% colour when choosing your palette. It's often the colour that needs to pop the most.
FAQs
How do I pick colours for each category in the 60-30-10 rule?
Begin with your brand colours or consider the emotional impact you want to achieve. The 60% should be neutral or soft, while the 30% should complement or contrast nicely with it. Your 10% should be bold and eye-catching.
Can I modify the percentages in the 60-30-10 rule to suit my design better?
While the standard is effective for balance, slight adjustments can be made based on your specific design needs or target audience preferences.
Is the 60-30-10 rule suitable for responsive and mobile-friendly designs?
Absolutely. It works across platforms by maintaining visual integrity and balance, ensuring your design adapts well on different devices.
Jargon Buster
Colour Scheme: The selection of colours used throughout a design to create style and visual appeal.
Balance: The even distribution of visual elements within a design to create a stable and harmonious look.
Colour Overload: A situation where too many competing colours make a design feel chaotic and unstructured.
Wrap-up
Using the 60-30-10 rule helps you create strategic design that enhances user engagement and maintains aesthetic balance. The most successful designs often go unnoticed at a conscious level because they feel just right. Next time you're looking to revamp or create a web page, consider this rule your go-to guide for making smart, beautiful colour choices. Your designs will not only look balanced but also function with a clear purpose, making your website more effective and appealing.
Ready to put these colour principles into practice? Join Pixelhaze Academy for more design fundamentals that actually work.