Understanding the colour wheel

Understanding the colour wheel

The colour wheel represents the relationships between primary, secondary and tertiary colours. This post will help readers to understand the colour wheel.

Introduction to the colour wheel

We all have our favourite colour (color in the US). Apart from the ability to alter our moods and emotions, colour can also be used to enhance meaning, create impact, convey structure, improve usability, group elements together and improve object recognition.

Colour is considered one of the important elements/building blocks of art, videography and graphic and web design.

When multiple colours are used together, certain colours just work together, while others don’t. Way back in 1706, Sir Isaac Newton created the colour wheel and it is still used today for the visual representation of the relationships between colours.

This post will discuss the colour wheel, colour properties and how it can be used to identify colour combinations that can be used as colour schemes.

The colour wheel

The colour wheel (sometimes also referred to as the colour circle or colour chart) is a visual representation of colour hues organised in a circle.

To understand the colour wheel a bit better, we first need to look at hues. They are used in the HSB/HSV/HSL colour space.

In colour theory, the hue is one of the main properties of colour (the others being saturation, brightness, tone — see later). When looking at a paint colour, the hue is a pure pigment without the addition of white or black. It is the pure spectrum colours commonly referred to by name, e.g. red, orange, magenta, etc.

The hue scale

The hue scale represented on a spectrum of 0 to 360.

On a computer, the hue is defined by a number ranging from 0 to 360, which, if used as the angular position around a central point can be represented as a ‘circle of colours’.

RGB colour wheel

Hue represented by a number ranging from 0 to 360 as the angular position around a central point.

Looking at Adobe Photoshop and Inkscape’s colour pickers, hues are represented by the vertical or horizontal slider while H is selected. Each colour has its own hue value.

By, for example, keeping S and B at 100% on Photoshop and S at 100% and L at 50, a hue value of 240 will give the colour blue. By moving the slider, other hues (colours) can be selected.

Photoshop colour picker for hue

The hue colour picker Adobe Photoshop.

Inkscape colour picker for hue

The hue colour picker in Inkscape.

By separating the hues into primary, secondary and tertiary colours, 12  colours will remain. These 12 colours make up a simplified colour wheel.

The basic colour hues

A basic, simplified colour wheel showing the primary, secondary and tertiary colours.

Primary, secondary and tertiary colours

As mentioned earlier, the colour wheel can be divided into primary colours, secondary colours and tertiary colours.

The primary colours are red, yellow and blue. Other colours can be created from primary colours, but primary colours cannot be created from other colours. Theoretically, all hues can be mixed from these three basic colours.

Primary colour mixing

A combination of pimary and secondary colours.

The secondary colours are green, purple and orange. They are created by combining primary colours. By, for example, combining red and yellow, orange is created.

The tertiary colours are created by combing primary and secondary colours. They are blue-green, blue-violet, red-violet, red-orange, yellow-orange and yellow-green.

Warm, cool and neutral colours

By splitting the colour wheel in half between yellow and violet, the colour wheel will be divided between warm colours and cool colours.

Warm colours

Warm colours, such as red, orange and yellow, evoke warmth. These colours remind us of things like the sun or fire. They are vivid and energetic and tend to advance in space. Warm colours are used to draw attention first.

Warm vs. cool colours

The colour wheel showing the separation of cool colours and warm colours.

Cool colours

Cool colours, such as blue, green and purple, evoke a cold feeling. This is because they remind us of things like water or grass — nature-like. They give the impression of calm and create a soothing effect.

Neutral colours

Neutral colours, such as white, black, grey or brown, evoke a feeling of dullness. Grey and brown are considered neutral because they don’t contrast with most other colours.

Saturation, brightness and tone

To create different shades of a colour (e.g. shades of red), it can be tinted, shaded and toned.


Saturation (also referred to as vividness or colour intensity) is the colour property that refers to how pure a colour is.

If the saturation value is 100%, no white is added and the colour is at its highest intensity. In other words, by desaturating a colour, more white is added. 0% saturation shades the colour to complete whiteness.

The process of adding white to a colour is called tinting.

Tinting is often applied to create colour highlights and lighter shades of a colour (e.g. pastel colours). Tinting can also be used to create different colours. For example, by adding white to red, the colour pink is created.

Photoshop colour picker for saturation

In the Adobe Photoshop colour picker, saturation can be altered by selecting S. Here the colour red is desaturated by 50%, creating a softer, light shade of red (i.e. pink).


Brightness is the colour property that refers to how much black is added to a colour. If the brightness value is 100%, no black is added and the colour is at its highest brightness.

In other words, by decreasing its brightness, more black is added. 0% brightness shadows the colour to complete blackness. The process of adding black to a colour is called shading.

Shading is often applied to create colour shadows and darker shades of a colour.

Photoshop colour picker for brightness

In the Adobe Photoshop colour picker, brightness can be altered by selecting B. Here the colour yellow is shaded 50% to create darker yellow.


Tone (also referred to as lightness or value) is the colour property that refers to how much grey is added to a colour. The same effect can be achieved by combining tinting and shading. If grey is added to a colour, the result is a different tone and the process is called toning.

Colour circle

The colour circle complete with hues (outside), tinting, toning and shading (inside).

The Adobe Photoshop colour picker uses Brightness (i.e. shading), whereas Inkscape uses Lightness (i.e. toning) to create different shades. That is why the HSB colour space can also be referred to as HSV and HSL.

Colour schemes

Colours can be combined in numerous ways. Some colour combinations work while others don’t — e.g. they are in harmonic balance. Combined colours that work well together can be collectively grouped as a colour scheme (sometimes incorrectly referred to as a colour palette). The colour wheel can be used to identify colour schemes.

By combining colour schemes, most of them will include warm and cool colours (see earlier).

On the colour wheel, colour combinations that work well together include monochromatic colours, complementary colours, triadic colours, square colours, tetradic colours, analogous colours and split complementary colours. These are also referred to as types of colour schemes.

Monochromatic colours

Colours from the same colour family tend to look great together. Monochromatic colour schemes use tints and shades of the same colour to create sophisticated and elegant looks.

Monochromatic colour scheme

Monochromatic colour scheme

Complementary colours

Complementary colours are those that are opposite from each other on the colour wheel. A complementary colour scheme creates a vivid, energizing, interesting and often dramatic effect. Complementary colours will always include one warm and one cool colour which will have a strong visual contrasting effect and enhance the temperature of each other.

Complementary colours

Complementary colour scheme

Triadic colours

A triadic or triad colour scheme uses three colours equidistant/evenly spaced from each other on the colour wheel. This colour scheme produces a high contrast effect while preserving a nice harmony.

Two of the three colours will either be warm or cool, while the third one will be the opposite.

Triadic colour scheme

Triadic colour scheme

Square colours

A square colour scheme uses four colours equidistant/evenly spaced from each other on the colour wheel. These colours create a dynamic, vivid and playful effect. Square colour schemes work best if one colour is dominant and there’s a balance between warm and cool colours.

Square colour scheme

Square colour scheme

Tetradic colours

A tetradic colour scheme (also called a rectangular or tetrad colour scheme) uses two pairs of complementary colours.

By combining colours this way a rich colour scheme is created that offers plenty of possibilities for variation. As with square colour schemes, rectangular colour schemes work best if one colour is dominant and there’s a balance between warm and cool colours.

Tetradic colour scheme

Tetradic (rectangular) colour scheme

Analogous colours

An analogous colour scheme uses two to five colours that are adjacent to each other on the colour wheel. It can also be referred to as the adjacent colours colour scheme.

These colours usually match well and are used to create a calming effect. Analogous colours are often found in nature and are harmonious and pleasing to the eye. They are used to create serene and comfortable designs.

Usually, one colour is chosen to be dominant and a second to support. A third colour is often used (together with black, white or grey) as an accent. Be careful not to use too many adjacent colours for this colour scheme and make sure to have enough contrast.

Analogous colour scheme

Analogous colour scheme

Split complementary colours

A split-complementary colour scheme is similar to the complementary colour scheme in that it uses colours on the opposite sides of the colour wheel, but instead of using two colours, one colour is split into two adjacent colours from that split colour.

In other words, in addition to a base colour, it uses two colours adjacent to its complement. The split-complementary colour scheme has the same strong visual contrast as the complementary colour scheme but has less tension.

Some authors considered this colour scheme as a good choice for beginners because it is difficult to mess up.

Split complementary colour scheme

Split complementary colour scheme


By looking at the colour wheel, we can get a better understanding of hue, saturation, brightness and tone.

The colour wheel can also be used to select colours and colour schemes that work well together. Various online colour scheme pickers are available.

Leave a Reply

Your email address will not be published. Required fields are marked *