Colour theory is the idea and practise of creating a structure for each of the primary, secondary and tertiary colours that allows us to see how each colour works in relation to one another, allowing us to get a better understanding on which colours complement each other and which ones don’t combine well.

There are three main colour theory categories; the Colour Wheel, Colour Harmony and Colour Context. In this article, I will describe each of these works along with how we implement them in our everyday work here at Mosaic.

The Colour Wheel

The Colour Wheel is a wheel that uses primary colours (Red, Yellow & Blue). This was originally designed by Sir Isaac Newton in 1666. The colour wheel highlights each of the primary, secondary and tertiary colours with their shades starting from a solid block colour and fading down to white; this gives us our colour hues. Each colour is placed between the colours that most associated with it. This allows us to see which colours go well together and how well all the colours will blend.

Here at Mosaic, we like to use the colour wheel when creating new websites, if the client is in need of branding and has not yet been established yet we can have free reign over the colours we can use. This allows us to find each a set of complementary colours that catch the eye of the viewer and draws them in. In the next section, we will go into more detail about complementary colours along with other colour schemes when we talk about colour harmony.

Colour Harmony

Colour Harmony is the practice of using colours that are well associated with one another to pick out the perfect balance in design and to make sure the chosen colours have a smooth contrast and are not too harsh to look at. Naturally, some colours work better with each other than others do, colour harmony is about differentiating these rather than just always using our favourite ones (Or else everything we make would just be 50 shades of purple!). We have listed some of the most common colour schemes based on colour harmony below:

Analogous Colours

An Analogous Colour Scheme is the idea of using a selection of usually 3 to 5 side-by-side colours on the colour wheel. These colours generally contain one prominent colour with some lighter and darker tertiary colours that are either side of the chosen colour on the colour wheel. Below is an example of an analogous colour scheme:

Complementary Colours

Complementary Colours are a duo of colours that are directly opposite one another on the colour wheel. The opposing colours create the maximum possible contrast allowing the colours to stabilise each other out, as one is a dominant colour whilst the other is a recessive colour. Below is an example of a complementary colour scheme:

Triadic Colours

A Triadic Colour Scheme is very much like its complementary colour counterpart but instead of choosing two opposing colours, this uses three. To find the correct colours to use in a triadic colour scheme you have to choose the primary colour you would like to use and calculate the other two by finding the equal distance between all three points.

This variant of colour harmony works best when there is one designated dominant colour or all three colours only highlight the design. Below is an example of a triadic colour scheme:

Colour Context

Colour Context is the way each colour interacts when combined with other colours. The idea of colour context is to highlight which colours contrast well with certain combinations and which colours are absorbed. This is an important step in our industry in particular as it allows us to know which shades to use and in what contexts to make sure nothing clashes and every element is displayed clearly and draws the user’s eye.

Depending on the surrounding colours, the way our eyes view colours changes meaning that the same colour on two different backgrounds may appear slightly different even though they are the same shade, this can sometimes cause confusion, as it is the best practice to introduce as minimal as possible shades to keep brand identity strong.

Why don’t you have a look at some of the previous projects we have completed here or read more into branding with our blog ‘What is a branding kit?’.

If you would like to inquire about any of our services and find out how we can help you, please contact us on 01925 563 960 or Contact Us.