Designing a colour scheme for your website is more complex than just choosing a few colours that look good together. Each colour on your website has a specific job to do, and they need to not only co-ordinate, but look good in relation to each other in the right locations and proportions. A great colour scheme represents your brand, AND brings the website together with high contrast and legibility.
I'm going to show you how to design a simple, fool-proof colour scheme for your website that uses your brand colour.
You might think you have the perfect combination because the palette looks good in a Pinterest pin, and then you try to design a website with the same colours and it looks horrible. Then you go back to the drawing board, or rather the colour wheel, and choose different colours.
In this post I'll show you how I design and test a fool-proof colour scheme.
This is a cyclical process, where you will choose colours, test them, tweak them, and test them again, and I'll show you all the tools I use before I even start creating a web site.
We’re going to design a basic, versatile colour scheme for your website. using 5 colours. Imagine you have 5 colour “slots” to fill, and each colour has a specific set of tasks to fulfil on your website. The slots might be boxes in a Coolers palette, or rectangles in a Canva document.
Set up your blank "slots" like so:
If you already have a brand, that's great! You'll use your primary brand colour for Brand A slot. If your brand has two colours you can also fill in Brand B.
If your brand is only associated with one colour, then Brand B will be an important colour choice, so we'll come back to that one.
The next easiest colour slots to fill are the Background and Text. If you're new to web design, I highly recommend sticking to white for the background and black or very dark grey for the text. They are versatile and will coordinate well with any brand colours. And black text on a white background is very easy to read.
So now you’ve filled 3 or 4 slots on your palette.
Next let's choose the Alternate Background. This will be used as a background to break up the page a bit. In my opinion, this is an important colour for setting the mood of the page. It shouldn't be the most memorable, attention-grabbing colour on the page, but it's like the ambient music that sets the tone. It should be really light to put dark text on, or really dark to put light text on.
A really light grey is a good basic option for a clean look, a soft pink or coral might be good for a feminine brand, and light blue or tan could work for a wellness, or nature-focused brand. Of course, it has to look good with your primary brand colours. In the example above, I've used light blue as the alternate background colour. It is light enough that the bright blue still stands out, and it doesn't steal the show.
Finally, let's look at your Brand B colour. If your brand has two prominent colours, you might be able to use the second one as your Brand B, but if they are not high-contrast with each other, you might want to choose a different colour. Too many colours
Below is a very hasty sketch of the anatomy of a simple website to demonstrate the use of colours.
In this example, yellow is Brand A, and bright blue is Brand B. The yellow covers a larger area, and the blue is high-contrast. In this case, it's a complementary colour, which means it's on the opposite side of the colour wheel. It's great to use a complementary colours for Brand A and Brand B because then calls-to-action and buttons will jump out on the page.
As I mentioned, this is a cyclical process. You might fill in 3 colours that co-ordinate, and then try them on the page and find that the text isn't legible, or your Brand B buttons don't look good on your Alternate Background.
In the video below, I demonstrate how I use my Canva template to test how different colours will look on different common elements of a website, such as CTA buttons, Headlines, and different background sections.
To help you with experimentation, I've made a free template in Canva for you to download. To use it, first download it below. Then make a copy. Then you can replace all the colours with your own colours to test all the combinations of each colour being used for each element.
You can test your colour scheme, see what you like or dislike, change colours, and try it again.
Get the Canva Template
Sign up to get the free Canva template as shown in the video.
Think about which colours are going where, and do they look good being used as each element?
Are they high-contrast, and is the text legible?
Upgrading Your Color Scheme
Once you have a colour scheme that works using white and black, then you can add a little sophistication by replacing black with another coordinating colour, but make sure it is very dark for legibility. Dark grey, navy, or dark brown are possibities.
Next, you can continue to add a bit of depth to your scheme by using shade variations of your core colours. This is easy to do in Thrive Architect by simply changing the opacity of the element in the sidebar.