The colour wheel represents the relationships between primary, secondary and tertiary colours. This post will help readers to understand the colour wheel.
Table of contents
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.
- Get the ROCCAT Burst Pro PC Gaming Mouse from Amazon.com
- Get the Wacom Intuos wireless tablet from Amazon.com
- Get the XENCELABS Drawing Tablet from Amazon.com
- Get the LG 22MK430H-B 21.5″ Full HD Monitor from Amazon.com
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 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’.
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.
The hue colour picker Adobe Photoshop.
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.
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.
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.
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
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.
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.
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.
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
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 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
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
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 (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
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
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.