Unsure what colours to use on your website? Use the 60/30/10 rule
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:
