What are the best colours for your website?
How to choose a colour palette for your website
The best colour schemes are visually harmonious, which means that all of the colours work well together, in the correct proportion.
You can identify a harmonious colour combination by using the following scheme:
Monochromatic
Analogous
Complementary
Split complementary
Triadic
Tetradic
Before you get worried, as I know all of these sound very technical, I’m going to go through each one in turn and talk to you about how they could work for your brand.
I like to come up with my colour schemes, by first thinking about, the colours that work psychologically for the brand, and if you haven’t done that yet, then I suggest you check out my other colour video by choosing one of the six different colour schemes, from the colour wheel.
What is a monochromatic colour scheme?
The first is a monochromatic colour scheme, which is different tones, tints or shades of just one colour, so only one colour throughout the website.
This scheme creates a versatile, cohesive and calming colour scheme and it’s very sleek and modern but make sure that you use contrast if you pick this one because you need to keep it interesting.
What is an analogous colour scheme?
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 and peace and tranquility are super important. Things like spas or 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.
What is a complementary colour scheme?
Next, 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, then it will reduce the tension.
What is a split complementary colour scheme?
Next the split complementary colour scheme, which uses three colours. You choose the first one and then use the colours either side of the compliment.
So the one that we just talked about, the two colours either side of the one directly opposite and this has the same strong visual contrast, as the complimentary theme but it has less tension in it.
The split complementary colour scheme is a really great choice for beginners, as it’s quite hard to get wrong.
What is a triadic colour scheme?
The triadic colour scheme also has three colours, but this time they’re equally spaced on the wheel.
It’s a vibrant and vivacious colour scheme but you can lessen the tension by choosing tints or shades of the colours.
Now, this scheme is not for beginners, 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.
What is a tetradic colour scheme?
This is four colours, made up of two pairs of complementary colours. And like the triadic colour scheme, this one is vibrant, colourful, strong and rich but it’s also not for beginners.
It’s very tricky to get right and it’s quite an aggressive colour scheme. So to reduce this, you should choose one colour to dominate.
What colour schemes are brand appropriate?
Once you’re happy with the colour scheme that you’ve chosen, you need to actually 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 that if you’re trying to attract women, then they generally prefer tints of colours. So that’s the paler versions of the colours, like if you chose red, then maybe a pinky colour. A lighter blue rather than a navy blue.
And if you’re trying to appeal to men, then they prefer shades or tones of colour. So they are darker, at the darker ends of the spectrum.
How to choose your colours, and create a colour palette for your website
So, how do you create a colour palette or scheme from your chosen colours?
Let’s pretend that I’ve highlighted blue-green as one of my colours. If I think about blue-green what springs to mind?
For me it’s the sea.
So first of all, I’ll do a search for the sea, and I’ll see all the images which Google thinks represents sea blue. Straight away this gives me some colours, and I can even see a colour palette.
Once I find an image I like I can copy the image address and then go to a website called coolours.co to help me create a foolproof colour palette from this image.
If I click on the camera icon, I can upload or paste the image URL in. This will create a colour scheme based on this image. We can then alter that until we find something that we love for our website.
If you are having trouble finding images that you like then the generator allows you to show different colour schemes. And you can play around with different shades and tints until you find something that you love.
You can then create hex codes and just copy that straight into your website for use all over it.
How to use colours to design your website
Now you want to use that palette to start designing your website. It’s useful to think of what colours you are going to use for the following.
First is the background colour, this is the background of your whole website. I tend to go for the very lightest version of my colours for the background.
So it’s usually white or a light colour but if you prefer, you could have a dark background with light texts on it. But unless you are a luxury brand I wouldn’t recommend this.
Next is the body text, so 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 a dark colour background. If you have a pale background then a dark gray, works really 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.
And the third colour that you need to think about, is the accent colour. So this should be your brightest, loudest colour. It’s going to be used for things that need to, stand out on your website, like calls to action buttons. This will help your user 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.
That was a lot to take in!
Now you 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 on my website here.
