Unsure what colours to use on your website? Use the 60/30/10 rule

Written By Chris Shirley MA FRGS

Designing a colour palette for a website is a crucial aspect of creating a visually appealing and cohesive brand experience.

 

One effective approach to achieving balance and harmony in colour selection is the 60/30/10 rule. This rule dictates that 60% of the colour scheme should be the main colour, 30% the secondary colour, and 10% the accent colour. Here's a detailed guide on how to implement this rule effectively:

 

Choose the Main Colour (60%):

Start by selecting the main colour, which will dominate the website's design. This colour sets the tone and establishes the overall mood of the site. Consider factors such as the brand identity, target audience, and the emotions you want to evoke. It's essential to choose a colour that aligns with the brand's personality and resonates with the audience. For example, if the brand aims to convey professionalism and trustworthiness, shades of blue might be appropriate.

Select the Secondary Colour (30%):

Once you've decided on the main colour, it's time to choose a complementary secondary colour that enhances the visual appeal of the website. This colour should harmonise with the main colour while providing contrast and variety. Look for colours that create balance and add depth to the design. Consider using analogous or complementary colours to create visual interest without overwhelming the user. For instance, if the main colour is a soothing blue, a secondary colour like light grey or muted green can complement it effectively.

Add the Accent Colour (10%):

The accent colour serves as a highlight or focal point within the colour scheme. It adds pops of colour and draws attention to specific elements on the website, such as buttons, call-to-action (CTA) elements, or important information. Choose a colour that contrasts with both the main and secondary colours to ensure it stands out effectively. Bright and vibrant hues can create visual emphasis and guide users' attention to key areas of the site. However, it's essential to use the accent colour sparingly to prevent it from overpowering the overall design.

Test and Refine:

Once you've assembled your colour palette according to the 60/30/10 rule, test it across different devices and screen sizes to ensure readability and accessibility. Make adjustments as needed to optimise the colour contrast and legibility. Additionally, gather feedback from users to gauge their reactions to the colour scheme and iterate based on their preferences.

By following the 60/30/10 rule and carefully selecting colours for the main, secondary, and accent elements, you can create a visually pleasing and harmonious colour palette that enhances the user experience on your website.

You might also like:

Featured
WTF is ‘Branding’ – and Why Should It Matter to Your Business?
WTF is ‘Branding’ – and Why Should It Matter to Your Business?

Branding is much more than just a logo or a catchy slogan. It is the essence of your business, encompassing everything from your visual identity to the way you communicate with your customers.

At Haus of Hiatus, we believe that effective branding is the key to building a strong, recognisable, and trustworthy business. This is achieved through the principles of associative learning, the law of least mental effort, and the mere exposure effect.

What is a ‘Satellite Brand‘ and How Can It Help Your Parent Company?
What is a ‘Satellite Brand‘ and How Can It Help Your Parent Company?

In today's dynamic marketplace, the most resilient companies continually seek innovative strategies to expand their reach and enhance their brand portfolio.

One such strategy we often recommend in our marketing audits, is the creation of satellite brands. But what exactly is a satellite brand, and how can it benefit your parent company?

If you’ve not heard of a satellite brand, it’s an extension or offshoot of a larger, more established parent brand. While it operates with a degree of autonomy, it remains closely associated with the main brand, benefiting from its resources, reputation, and market presence.

How Design Systems Improve Your Website and Brand Experiences
How Design Systems Improve Your Website and Brand Experiences

You may not realise it, but at the core of your website and brand is a 'design system,' a method of understanding that helps to harness principles like the Aesthetic-Usability Effect, Jakob's Law, Law of Least Mental Effort, Law of Similarity, Serial Position Effect, and the Von Restorff Effect.

In this article, we’ll delve deeper into how these psychological and neurological phenomena intersect with design systems, reshaping the landscape of your website and brand experiences.

Chris Shirley MA FRGS

About the Author: Chris is the founder of Hiatus.Design, a website design and branding studio that works with brands all over the world, a former Royal Marines officer and former risk advisor to the BBC.

Chris has travelled in over 60 countries, is a fellow of the Royal Geographical Society (FRGS), a Guinness World Record holder for rowing over 3500 miles across the Atlantic Ocean, a Marathon des Sables finisher, and has worked with Hollywood actors, world–renowned musical artists and TV personalities!

https://www.hiatus.design
Previous

Want to make your brand refresh a success? Engage all of the stakeholders early.
Next

What is ‘brand signposting’ and how much of it do you need?