3 Steps to Choosing Colours For Your Website

We may earn money or products from the companies mentioned in this post.


3 Steps to Choosing Colours For Your Website

It can be an awkward task to choose the colours for your website. You may know little or nothing about design or colours; how then can you choose a beautiful colour scheme for your website? Even if you are not the one designing it, it is good that you know a little about the colour choices for your website.

The combination of colours used on your website could mean the difference between a website that repels visitors or one that attracts and converts customers into buyers or leads.

I have created this short 3-step guide to help you choose a great colour scheme for your website.

The 3 Steps to Choosing Colours For Your Website

  1. Choosing a dominant brand colour based on colour psychology
  2. Creating 1 to 2 accent colours to create a website colour scheme
  3. Choosing a background colour to complement the colour scheme

I will look at each in turn:

1. Choosing a dominant brand colour based on colour psychology

When you decide to create a website, one of the most important thing is the colours that you will use. It is not enough to choose any colour that you like.  Your favourite colour may not be what is best for your business. It is a hard concept to accept for those who really love a particular colour until they get to understand the psychology of colours.

Each colour has a ‘personality.’ Each colour or shade invokes an emotional response in humans. This response is often involuntary; the colours affect us subconsciously. Building your website with this in mind is the best place to start.



Colour is so important, it has the ability to change certain types of shopping behaviour and attract specific types of shoppers.

consumer-pychology-color-kissmetrics-thumbnail-2Source: Kissmetrics.

Carefully choosing the right colours will land you the right types of customers for your business. This main (primary) colour will become your brand colour. Just like the red in Coco Cola or the purple in Yahoo!, it will be the colour you want people to identify with your company.

2. Creating 1 to 2 accent colours to create a website colour scheme

Now that you have chosen your primary colour, it is time to create accent colours. These colours can either complement or contrast your main colour. You use these colours to accentuate, for use on buttons, sometimes on headlines, subtitles or quotes. The main thing to understand though is that it cannot be any random colour.

I am not an artist, so choosing colour accents are made easy for me using online tools. There are many free tools online for choosing colours. One of my favourites is the Adobe Colour Wheel. Once I have settled on the main colour, it helps me to choose the following types of accent colours: analogous, monochromatic, triad, complementary,  compound, shades. It also allows us to set our own custom colours.

Adobe Color wheel I Color schemes

Another of my favourites is Color Hex Color Codes. Its homepage shows us a colour chart of users latest favourite colours. You can input your colour code in the input box and get shades, tints, triadic colours, analogous, monochromatic, complementary or related colours.

One of the advantages of using Color Hex Color Codes is that it generates a CSS code as well as HTML element samples.

Color Hex Color Codes

There are many other free sites online that allow you to choose matching colours, but these two are the ones I use most often. Just remember to only use 1 or 2 accent colours. More than that will make the website too busy and may confuse visitors.

3. Choosing a background colour to complement the colour scheme

It is a fact that most website backgrounds are white. This is not by chance, as white is a neutral background that goes with every colour scheme.

The colour that matches one type of business may not necessarily match another type of business. The colour you choose for your website, therefore, depends on the purpose for which the website is made. For example, have you noticed that most e-commerce websites are white? A neutral white background highlights the products that are listed on that website. The same is true for content intensive, websites promoting a service and portfolio website. White is the colour of choice for backgrounds.

However, if you want to create a strong brand presence on a company website using your main colour, then you may want to think of having a coloured background. In this case, your main colour is usually too bright to be used as a background. This is where your colour picker comes in. you may find a shade of your main colour and use it as the background.


A pale shade of yellow I used on the website of my assembly. This pale yellow matches with the main colour scheme, having a neutralising effect while at the same time not affecting the legibility of the text.

For stylish and creative websites that are graphic intensive, there really are no rules. You are only limited by your imagination and creativity. This includes the following types of websites: beauty, design, fashion, restaurants and other creative industries.

The golden rule: never ever choose a background that makes your text hard to read. Your content is king and must be allowed to stand out.


These are the 3 steps to choosing colours for your website. Choose the main colour based on colour psychology. Find 1 or 2 accent colours and choose a background. If you follow these steps, you can create beautiful website schemes that are not only pleasing to the eye but get your visitors to stay longer and/or return to your website.