blog post image

8 Tips For Nailing Your Website Colours

Settling on a colour scheme for your website is a significant part of developing a new website. Colours are emotive and numerous studies have investigated the science behind their effect on the brain.

This post will take a look at some key areas to think about when deciding on a colour palette for your website.

Giving careful consideration of the right colours will deliver the right impression to website visitors. People are action orientated when they visit websites if the wrong impression is given they will be quick to judge if a site meets their intended action.

Effective use of colours on your website can:

  • Encourage the browser to read on.
  • Communicate a message.
  • Convince a consumer to act.


1. Start With Your Brand Colours

Firstly take inspiration from your brand’s associated colours.  You have chosen these colours as a reflection of your company’s values, feel and offering. Basing your website colours on your established brand is going to ensure visitors to your site instantly connect and maintains consistency online and offline.

The Campbell's Real Stock website takes the recognisable red and brown colours and uses them as the key website colours.

September , 8 Tips For Nailing Your Website Colours 1

2. Stick To Natural Colours

Natural colours are more likely to evoke a positive response.  Avoid highlighted colours as they will stress the users eye after prolonged viewing.

Creative Bloq has put together an informative list of 12 colours and the emotions they evoke.


3. Contrast Text Colour With The Background

This is a user experience issue, if they can’t read what is on your website, they can’t use it. Black or dark grey on a white background is a common choice for text content blocks.  However you can see on the Lion Red page as long as the text colour is a distinct contrast to the background other palettes can work well.

September , 8 Tips For Nailing Your Website Colours 2


4. Limit Your Palette To Around Three

It is generally accepted that an average of 3-4 colours is optimal for your colour range.  Anymore and you will risk colour clashes that are taxing on the users eyes pushing them to leave your site.  If you are leaning towards a higher number, try stick to the option of various shades of the core colours.


5. The 60/30/10 Rule

Web designers have taken the interior design rule 60/30/10.  That is your website should use the following ratio:

60% for the primary colour

30% contrasting the primary colour

10% used as an accent to one of the main colours


6. Use Plenty Of White Space

Not specifically a colour palette consideration but one we like to practice and remind people about. When we say white space it doesn’t mean it must be white but simply left clear of graphics, text or other elements. White space can give a sense of order and help highlight elements you want the user to focus on.

September , 8 Tips For Nailing Your Website Colours 3


7. Colour Code To Emphasise Parts Of Website

Using different colours can be an effective way of signalling different parts or divisions of your website. You may have noticed that our BTL website has distinct colours corresponding to our different areas of specialisation, e.g. yellow for BTL Digital.

September , 8 Tips For Nailing Your Website Colours 4  


8. Use Colours To Highlight Key Call-to-action Buttons

Using your 10% accent colour is an effective way of attracting the browser’s eye to a call to action button. For example a Sign Up button, Add To Cart or Register depending on your website’s key goal conversion.

September , 8 Tips For Nailing Your Website Colours 5


Taking the time to select the right colour palette for your website can influence the effectiveness of your website to invite customers to browse further, communicate your offering and encourage them to act.