Understanding the colour wheel

Understanding the colour wheel

The colour wheel is a 360-degrees representation of colour hues organised in a circle. It can be used for the visual representation of the relationships between primary, secondary and tertiary colours.

This is an ongoing post. Please suggest corrections, explanations, etc. in the comment section at the bottom of this page.

Introduction

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. 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

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

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
Selecting hue values in Adobe Photoshop
Inkscape colour picker for hue
Inkscape colour picker for hue

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

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

Warms 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

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

Saturation (also referred to as vividness, colour intensity or chroma) 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 also called tinting.

Tinting is often applied to create colour highlights and lighter shades of a colour (e.g. pastel colours).

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

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

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 a 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 on 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

Conclusion

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.

About the author
Renier busies himself with improving his English writing, creative web design and his websites, photoshopping, micro-electronics, multiple genres of music, superhero movies and badass series.
Behind the Scenes is a free, informative website. If you find value in any of our content, please consider making a donation to our cause.
Donate via PayPal

Save, share & Disqus

Use the buttons below, on the left or the bottom of this page to share this post. Your comment is important, but don't be a knob. Keep it constructive and polite.

Comment via Disqus

Disqus is a worldwide comment hosting service for web sites and online communities. This secure platform ensures a pleasant commenting environment which is manageable from one account. Use the Login button to sign up.

More colour related posts

Fiverr – Freelance services marketplace for the lean entrepreneur
Fiverr – Freelance services marketplace for the lean entrepreneur
24 October 2020
Ad: Fiverr is the world’s largest freelance services marketplace for entrepreneurs to focus on growth & create a successful business at affordable costs. More…