Choosing Colours to Achieve Your Website Goals

Andrea Palmer Jeanette Helen Wilson

Published Tue 02 Sep by Andrea Palmer and Jeanette Helen Wilson in Perfecting Your Website's Design

This article shows you how to attract your target audience and direct them to your calls to action, using effective branding and colour consistency.

The use of colour on your website will be one of the keys to its success. Eye-catching and potentially powerful to the brain’s pleasure-receptors, it is proven to increase conversions: so visitors stay on your website for longer and want to revisit for more. The longer they spend on your site, the more likely they are to commit to a purchase.

Human vision is dominated by colour. This is why colour choice is normally at the forefront of web designers’ and business owners’ minds when designing how a website is going to look.

So how can the way your website looks increase sales and customer loyalty?

1. Attract Your Target Market

For many, the main focus of their website’s design is to engage a target audience by fulfilling their needs. Knowledge of your target audience will give you clear direction for your website’s colours: for example, their gender, age and culture.

Your business or organisation itself may be naturally associated with particular colours in people’s minds, so it may be counter-productive to go against the grain just for the sake of it. For example, if you run an holistic therapy business, you might consider calming colours such as greys, blue tones and greens rather than stimulating reds and oranges.

Screenshot of Aveda website

Why This Colour Scheme Works: 

  • The colours used- greens, greys and purple tones - are calming and serene
  • The colours are designed to attract Aveda’s target audience: women
  • It is not too busy, which adds to the calming effect and doesn’t detract from the photography, which is what will ultimately draw visitors to the products and see clear benefits
  • The background colour reflects the colour of the eye make-up on the model’s eyes in the main picture: this adds to the feeling of congruence and does not jar the eye
  • The three-colour scheme, a limited palette of secondary colours and shades, means that there are no clashes

2. Colour Schemes that are Attractive Without Sacrificing Accessibility

When planning your site’s design and colour scheme, there will be considerations for those who have eyesight related problems. Stark contrasts between background and text, such as bright white and pure black, can really cause headaches for users.

Look at the Seasalt website, below, for an example of a website that has clearly anticipated and solved accessibility issues, making their pages a lovely place to be.

Screenshot of Seasalt homepage showing yellow, blue and white colour scheme

  • Website colours that match the clothing advertised
  • The text is in gentle, subtle tones (not pitch black) so it is a lot easier for those who have eyesight related problems to read the text. It encourages them to follow through to inner pages, thus staying on the site for longer and be more likely to commit to a purchase

3. Colours to Enhance Your Website’s Success: Reinforcing Your Brand and Developing a Strong Visual Identity

The overall scheme of your website is a unifying force, holding the design together coherently and giving the visitor visual clues about how to use the site, where they are and what you want them to do next. Calls to action are vital. They work best when their colours are prominent: visitors eyes will be drawn towards it without being unduly dazzled or startled.

Screenshot of Fresher and Prosper homepage showing black, green and orange colour scheme

4. Choose Colours With Your Business in Mind

For web design coherence, a general rule of thumb is to restrict yourself to three colours, and vary the tones and shades of these by adding black or white. Using too many colours on one website, especially clashing ones, may confuse and dazzle visitors, deterring them from clicking through to inner pages and returning once they’ve left.

There is nothing wrong, however, with breaking the rules and using colours that completely contrast, for, say, calls to action.

Screenshot showing a tri-coloured website

  • The colour palette is simple and yet striking: so visitors aren’t overwhelmed
  • Features that the designer wants to draw attention to, such as the name ‘Pete Nottage’ and the main page links, are in contrasting colours

5. Colours to Guide Your Visitors in the Desired Direction

Look at the picture below, of a departure screen at an airport. At a glance, travellers can differentiate between actions, depending on their destination. For example, those travelling to Aberdeen or Berlin, will take cues from green background which signifies ‘go’. Whichever language they speak, they will get the message. By using simple colour coding, the information screen gives users quick indications of what to do next.

Image of a departure gate screen at an airport

Colour is also a mental shortcut. Once a person is familiar with the colour coding language, they no longer really have to think about the details of the journey. It’s like a brand.

image of the London underground Tube map showing different lines represented by different colours

Colour recognition is a strong instinct, so using colour coding on your website pages can help your visitors to find their way around effortlessly.

Screenshot of Trent Barton buses homepage with a concertina, in which each category is banded with a different colour

  • Trent Barton buses use a simple colour key, to help visitors find the information they’re looking for quickly and easily
  • The colour coding organises each section of the website, forging a clear path back to home from your current tab, and find where you want to go next

So, we’ve talked about how important colours are in the design of your website. Colours invoke feelings and emotions in website visitors and can be the difference between staying and leaving. Using colour not just to invoke feeling but also to provide mental shortcuts so your visitors can find their way round easily and follow your calls to action is key to winning lucrative conversions. 

Practical Guidance

We’ll leave you with a few practical tips you can put into action to make sure your website attracts an audience and carries them along the desired paths to purchasing, enquiring or signing up, whatever it is you want them to do.

  • When choosing the colours for your website, you can use your branding / logo as a starting point: especially as you don’t want your web pages to clash with them! Using the same colour palette will give your website that feel of consistency, and also reinforces brand / logo recognition into the bargain
  • If you don’t yet have a brand / logo, or having these is not appropriate to your particular business or organisation, try looking at the photographs / images you have selected to use on your site. Is there a particular colour that predominates? If so, consider using this as the anchor colour for your design
  • Browse other websites in your niche: you may find ones that really inspire you and others that make you feel: ‘Oh, NO! I don’t want my website to look like that!’ Whether you love or loathe them, taking inspiration from what has gone before you can really help get the design and planning process started
  • Use a colour wheel such as the one below to see how different shades of one colour can look and how they can complement each other. The colour wheel is also helpful when looking for different colours that are complementary (eg. ones opposite on the wheel, such as purple and green)

image of a colour wheel showing different shades of primary, secondary and tertiary colours

  •  For accessibility purposes, and to attract the widest possible audience, consider a contrast between your background colour and your text and text that is not too small
  • Consider who your target audience are and choose a colour palette that will appeal to them
  • Think about how you can get your calls to action stand out and signpost the way for your visitors. If they are unable to locate your calls to action, if they blend in too much with the background of your web pages, you could potentially lose visitors along the way
  • You may want to get the opinions of others about your design and colour choice before you make a final decision, as it may be costly to change your branding and website once it is established. Sometimes when you have decided on a colour scheme, it is hard to see it objectively. Ask your current customers, friends, business associates and perhaps conduct some objective market research (if time and budget allows) to comment on how what atmosphere the colour scheme evokes, how it makes them feel, how clear your calls to action are and if there were any accessibility issues they highlighted

Got anything to add? We would love to hear from you, in our comments section below!

Or have a question / query about this, or any other web-related issue? Visit our ask an expert page

Be The First to Comment on This Item

  • No comments for this item yet

    Why not be the first?

Comments Closed

Comments for Choosing Colours to Achieve Your Website Goals are now closed


What's New With The Team?

More Recent Updates

UK: 0115 8088303

INT: +44 (0)115 8088303

29 Royal Standard House
Standard Hill
Nottingham
NG1 6FX




Nottingham Web Development