Choosing winning website colour combinations

Tags: , &


As a follow up to our recent blog post on choosing colours for your web design project we thought it might be a good idea to take a closer look at some of the different types of colour combinations you can use when coming up your colour scheme.

In this blog post, we will be teaching you how to use colour triads to create a colour palette for your websites or applications

What is a triadic colour scheme?

A triadic colour scheme is a set of three colours taken from the colour wheel and there are 3 basic types of colour triad.

1. Generic colour triad, or a simple triad – this is a triad that is made up of 3 colours that are picked at equal distance from each other (i.e. red, yellow and blue)

2. Complimentary colour triad – this triad starts with picking two complementary colours and a third colour thats directly in the middle of them (i.e. cyan, yellow and tangerine)

3. Isometric colour triad – this triad is formed from picking your base colour and then having the other two at equal distance from the base colour.

What makes the last one different from the first is that the distance between the secondary colours doesn’t have to be the same as the distance to the base colour (see example below).


Choosing a good colour triad for your project

The first thing you will notice is that most triadic colour schemes are very vibrant.

If you are going with a colour triad for your colour combination,  the first colour you pick should always be the major brand colour. If you don’t have a brand colour, you should pick one that looks good and aligns itself with the brand’s values (we’ve written about this before on How to choose colours for your website). Once the first colour has been picked, the other 2 will can be calculated with relative ease.

Remember colour triads are there to assist you as a design tool, so you don’t have to be super strict when it comes to picking the exact colours on the colour wheel. I like to use them as a starting point and tweak the colours to make them work better together, because after all you are the designer!

Here are some examples of some nice colour palettes that I’ve found by using colour triads.


From these examples, if I was using one of them in a project, I’d be leaning more towards 1 of the top 2, as they appear more inline with modern web design aesthetics.  But of course, again it is a case of horses for courses and certain colours will align themselves with certain products/services.

And by now, I’d be considering:

  • Is your brand going for a more slick professional look?
  • Is it a start-up or an established business?  (I’d go for the top two for startups and the bottom two for established businesses)

How to use colour triads effectively

So now that you have your colours sorted how do you best use them?

My advice would be use one as your main colour and the other two colours, along with any shades, as accent colours. For your main colour, you’d probably want to go with the main brand colour or the one that resonates most with your company’s values. Use the other colours to highlight important content such as links or action buttons.

Also don’t forget about black and white. These days I tend to go more towards 60% white/black, 30% main colour and then 10% the other two accenting ones.

Some tools to help you pick good colour triads

Adobe Color CC (formally Kuler) is a great tool for helping you pick your colour scheme. It has a Triad setting, which sets the 3 main colours at equal distance from each other. Or if you want one of the other forms of colour triads then you can select custom and set the points yourself. Another cool thing about adobe’s colour tool is that it also allows you to select 2 sub tones along side your 3 main triad colours.

Adobe-color-cc-by-zing-design is similar to Adobe’s Colour CC. One of the key differences is that it allows you to change your 2 secondary triad colours without having to have all 3 be equal distance from each other. This enables you to make a complementary triad of colours or one that uses the isometric format i’ve talked about above.


Give it a go!

If you are stuck with picking your colour scheme for a project then give triads a go. Especially if you are looking for something a little more vibrant.

Of course you can always tone down on the situation later if its too much. However, as a designer I’m still more inclined to eyeballing my colours rather than go with a formula for creating them.

Though in saying that formulas like the colour triad can sometimes spark ideas for colour palettes that I otherwise wouldn’t have thought to explore 🙂

People who have viewed this post also viewed

Leave a comment

* Required fields


Please enter the CAPTCHA text