Finding the ideal colour palette for your website and brand will help attract your perfect customer and help keep them on your website for longer. 

Hey everyone, I’m Kelly, and today I’m going to show you how to put together a colour palette, for your website and brand, and stick around to the end to get your hands on a colour workbook, which walks you through putting together a colour palette step-by-step. 

The best colour schemes are visually harmonious, which means all the colours work well together, in the correct proportion. You can identify a harmonious colour combination by using the following schemes;

• monochromatic
• analogous
• complementary
• split complementary
• triadic
• tetradic 

I know all of these sound very technical, but before you get worried, I will be going through each one in turn and talking to you about how they could work for your brand. 

I like to come up with my colour schemes firstly by thinking about the colours that work psychologically for the brand. If you haven’t done that yet, I suggest you check out my other colour video. I then refine them by choosing one of the six different colour schemes from the colour wheel. 

Monochromatic

The first is a monochromatic colour scheme, which is different tones, tints or shades of just one colour, so it uses just one colour throughout the website. This scheme creates a versatile, cohesive and calming colour scheme and is very sleek and modern. Just ensure you use contrast if you pick this scheme, as you need to keep it interesting. 

Analogous

Next let’s look at the analogous colour scheme, which is three adjacent colours on the wheel. This creates a serene and calming colour scheme, which is perfect for businesses where balance, peace and tranquillity are important, like spas, organic products or yoga studios. Choosing one of those colours to dominate, (usually the middle one with the other two as accents) will stop this scheme from appearing dull. 

Complementary

Next, is the complementary colour scheme, which uses opposite colours on the wheel. It creates an eye-catching, dramatic and high energy scheme, but if you choose one colour to dominate and then the other as an accent, it will reduce the tension. 

Split-Complementary

Next, is the split-complementary colour scheme, which uses three colours. You choose your first colour and then use the colours on either side of the complementary colour (the one we just spoke about, on the other side of the wheel). This has the same strong visual contrast as the complementary theme, but it has less tension in it and is a great choice for beginners, as it’s quite hard to get wrong.

Triadic

The triadic colour scheme is also three colours, but this time they’re equally spaced on the wheel. This is a vibrant and vivacious colour scheme, but you can lessen the tension by choosing tints or shades of the colours. This scheme is not for beginners, as it’s quite difficult to get right and you should use it carefully and balance your colours. Choose one dominant colour, with the other two as accents, to ensure that your message will get through. 

Tetradic

Finally, the tetradic colour scheme. This scheme is made up of four colours, in two pairs of complementary colours. Like the triadic colour scheme, this one is vibrant, colourful, strong and rich, and it’s also not for beginners. It’s equally as tricky to get right, as it is quite an aggressive colour scheme. To reduce this, you should choose one colour to dominate. 

Creating a palette

Once you’re happy with the colour scheme you’ve chosen, you need to decide on the final colours. The bright primary colours are very appropriate for a nursery, or something appealing to children, but for most other businesses, these won’t be successful. 

Something else to think about is if you’re trying to attract women, they generally prefer tints of colours. So that’s the paler versions of the colours, so if you chose red, then maybe a pinky colour, lighter blue rather than a navy blue. If you’re trying to appeal to men, they prefer shades or tones of colour which are at the darker end of the spectrum.

Let’s pretend I’ve highlighted blue-green, as one of my colours and if I think about blue-green, what immediately springs to mind? Well, for me, it’s the sea. First of all, I would search Google for images of the sea, and I’m then going to see all the images that Google thinks represents sea blue. Straight away I will have a few colours, and as I scroll down, I can see an actual colour palette there too. 

Once I’ve found an image I like, I right-click and copy the image address. Then I go to a website called coolors.co and this is a website that helps me create a colour palette – it makes it foolproof. Once on the website, I click on the camera icon and you can either upload an image if you have one, or I can paste in the URL of the image in the box and you will see straight away it will create a colour scheme based on this image. As you click next, you can open it in the generator and here it’s created each of the hex codes for me, so I can click and copy it and use those straight away. 

If you can’t find an image you like or perhaps you only like one particular colour, but we don’t like any of the others in the palette, I can lock that one colour. If I then click on the three dots, I can choose ‘generate method’, which shows me all the different colour schemes. Therefore, if I wanted a monochromatic colour scheme (remember that was just one colour), then I click on the space and it generates a monochromatic colour scheme for me and if I like any of the colours that come up, I can click the lock, hit the space bar again, and it will generate another colour palette for me, and I can do this as many times as I want. 

I can then change this to the analogous colour scheme, which if you remember, is three colours next to each other on the colour wheel. If you only wanted three or four colours, you can click on the cross to remove a colour and then it will just find fewer colours for you. 

Another great thing about this is that you can view shades. If I click on the small squares in the colour itself, I can see all the different shades of the particular colour I am on.  

Once you’re happy with your colour palette, you need to copy the colour values into your favourite notes app, or you can save it if you create a free account with coolors.co. If you do create an account and want to come back and view your saved palettes, you can click on ‘library’ and they will be in there waiting for you. 

Now you have your colour palette and you want to start designing your website, so it’s useful to think of which colours you’re going to use for the following:

1. The background colour. This is the background of your whole website, so it’s usually white or a light colour, but if you prefer you could have a dark background with light texts. Rather than using white, I tend to go for the very lightest version of my colours. It’s just a bit softer if you don’t want to go for white, and the same with black, you don’t want to use black on your website unless you’re a luxury brand. 
2. The body text. This is the text throughout your website and it needs to stand out on the background you’ve chosen, so it has to be very dark if it’s a pale-coloured background or a very light colour, like white, on dark colour background. If you have a pale background then a dark grey, works well, much better than black, only use black if you’re a luxury brand, otherwise, it can just, throw your whole website off and it can cheapen your brand.
3. The Accent colour. This should be you’re brightest, loudest colour, as it’s going to be used for things that need to stand out on your website, like calls to action buttons. The user will see them immediately and want to click on them.

You can use the rest of your colours around your website or if you’ve only got one colour you can just use different tints or tones of it. 

You now have everything you need to put together a colour palette for your website and brand, and I’ve created a handy free workbook, to help you with this, which you can download by clicking here.