Colours and colour theory plays a huge role in our lives whether you notice it or not, and helps us identify and associate almost anything. This article will look at how colours work together, and why they’re important when it comes to usable design.

When do colours work together?

Think of the whole spectrum of colours as a circle, or wheel…a colour wheel!

Colour Wheel


Ignore shades of light and dark, and colour mixtures for now. Let’s just look at the purest form of any colour where it is saturated to 100%.

One colour VS two

Colours on opposite sides of this wheel complement each other and provide a high contrast. One colour can be seen clearly against the other which is great for usable designs like websites and makes reading text easier. Elements need to stand out from each other, and buttons need to look enticingly clickable.

Pick any colour, and the colour 180 degrees from it is called the complementary colour. Let’s say you’ve chosen a rather bright green as the colour you’d like to focus on. By using two contrasting colours as opposed to one:

One Colour

A design goes from this…

Two Colours

…to this!

Mixing colours

Ouch. That’s pretty bright. In order for any design to look natural, we want to mix the colours slightly so they look like they belong together under similar lighting conditions. By introducing a small amount of one colour into the other (think of it like mixing paint) we get two much more “harmonious” colours. Try using your image editor of choice and making the background one colour, and another layer with the second. Turn the opacity of the overlay colour down to maybe 10% and see how the colour looks. Repeat this with the colours switched to get both mixes.

Harmonious Colours

Harmonious Design

By using these slightly blended versions of the colours, our design now looks a little more palatable – but we aren’t there yet. The example above still has only two rather strong colours, and manages to look quite dull from the blending.

Tone it down (or up)

What we have right now is two colours, slightly blended, but still at full saturation. This is going to be a little hard on the eyes after a while, so it is good to create tones and neutrals.

By blending one colour with it’s complementary colour a bit further, we can make more tones.

We can also introduce tints by adding white (increasing the lightness), and shades by adding black (decreasing the lightness).

Shades and Tints

Play with the expanded palette within the design, and we’ve got something a little more like it. Nothing is overly harsh on the eyes which is great. With the introduction of more colours though, we don’t have anything that particularly stands out. We need links and buttons to stand out to drive website clicks, or draw the eye to the message in a graphic design.

Toned Design

Call to action buttons or places you really want to grab your viewers attention can stay saturated if you want. However, it typically isn’t a good idea to have a whole design’s palette cranked up to 11. Let the eye-catching colours pop by surrounding them with muted tones.

To get a bit more pop into the design, we can use blacks and whites, but be careful not to use complete black or complete white. These can tend to make a design look too harsh again.

Now if we apply this to a layout, you can see there are many more visual cues going on, guiding your eye.


Coloured Design


Now you know a little bit about colour theory and why it is useful for design! If you’d like a custom website built with principles like these from the start, contact Digizoid today.

If you liked this article or found it helpful, please share it around on Facebook, Twitter and all your social media channels!

Are you interested in writing about website design, graphic design or SEO? Send an email to [email protected] to get your articles featured on this blog!