This is part one of a two-part series on colour theory. As instructional designers, it’s important for us to understand how colour works, and how we can use it to our advantage and the advantage of our learners when designing courses. The topic can feel a little overwhelming at times, and you may have asked yourself these questions:

Are these colours complementary?
Is this an analogous colour scheme?
What is the difference between a tint, a tone, and a hue?

If you have found yourself asking these questions, then you’ve come to the right place! Be sure to stay tuned to learn more in part two of this series. In part one (this blog), you’ll learn all about the colour wheel, complementary colour schemes, analogous colour schemes, and more! Part two will focus on using colour in the digital world by diving into RGB and CMYK.

Colour theory is the study of how colours work together. It can explain why we feel a certain way about colour, and how it affects our moods. When we understand colour theory, we can start to use colour more effectively in our designs. It’s important to recognize that colours can have different meanings around the world and among different cultures, so keep this in mind when researching what colours to use in your designs.

You probably remember learning about the primary colours of red, yellow, and blue in school. You may even remember mixing these colours together to make additional colours like purple, green, and orange. These are called secondary colours. There is an additional set of colours that you can get from mixing primary and secondary colours together. These are called tertiary colours. For example, if you mix yellow and green together, you’ll get a colour called yellow-green. The colour wheel below shows an example of the primary, secondary, and tertiary colours.

Complementary colours are opposite each other on the colour wheel. For example, if you look at the image again, you’ll see that yellow and purple are opposite each other. Blue is opposite to orange, and red is opposite to green.

The colour in between yellow and orange is called yellow-orange and is it opposite of blue-violet. This means that yellow-orange and blue-violet are complementary colours. If you were to mix complementary paint colours together, they would create the colour grey. Essentially, they cancel each other out. Complementary colours are designed to have maximum impact as well, so you could consider using them when you want something in your design to be eye-catching.

Description: A colour wheel with colours shown in a tear-drop shape. All colours are labelled: red, blue, and yellow are primary; violet, green, and orange as secondary; and red-violet, blue-violet, blue-green, yellow-green, yellow-orange, and red-orange as tertiary. All of these colours are organized in a circle with lines connecting primary colours together and secondary colours together. Tertiary colours have no connecting lines.

Source: Voronova, O. (2024, January). Rules of Color Combination. Amadine. https://amadine.com/useful-articles/rules-of-color-combination

An analogous colour scheme is a combination of three colours that are near to each other on the colour wheel. The image below shows an example of a colour wheel where all the primary, secondary, and tertiary colours are given equal weight and space on the wheel. There are lots of analogous colour schemes available to you. Analogous colours live in harmony together, so you may consider using them to create harmony in your design.

Description: A four-by-three grid of 12 colour wheels. Each colour wheel shows three analogous colours, and each is labelled: yellow, yellow-orange, orange, red-orange, red, red-violet, violet, blue-violet, blue, blue-green, green, and yellow-green.

Source: Stillwell, M. (n.d.). Analogous Colors [Image]. As cited in Tonelli, L. (2019, June 10). What is an Analogous Color Scheme, and Why are Designers so Obsessed? Elle Decor.

https://www.elledecor.com/design-decorate/color/a27793858/analogous-color-scheme/

There are some additional colour schemes (seen in the image below) that can be created from the basic colour wheel. They are:

Split complementary. This is when you combine one colour from the colour wheel with the two colours that are adjacent to the colour opposite of it on the colour wheel.
Triadic. A triadic colour scheme is when you pick three colours that are opposite each other on the colour wheel. If you draw a line to connect them, it will form a triangle.
Side complementary. This is when you pick one colour on the colour wheel. And then you pick one more colour that is just beside the colour opposite to your first colour.
Double complementary. A double complementary colour scheme includes the four colours around two opposite colours, but not the two colours that are opposite.
Square tetradic. This is when you pick four colours on the colour wheel that are equal distances apart. If you drew a line connecting them, the lines would form a square.
Double split complementary. These are five colours opposite each other on the colour wheel, but not necessarily equal distances apart. If you drew a line connecting them, you would form a pentagon.

Description: A four-by-two chart of demonstrating the colour wheel relationships of colours: complementary, analogous, split complementary, triadic, side complementary, double complementary or rectangle tetradic, square tetradic, and double split complementary or pentagonal.

Source: Artist Till Death. (2023, April 10). Types of Colour Schemes [Blog]. https://artisttilldeath.com/artist-blog/f/types-of-colour-schemes

A **hue** is a colour in its purest form. A **tint** is a colour that has had white added to it. A **shade** is a colour that has had black added to it, and a **tone** is a colour that has had grey added to it. You only have one colour (or hue) to use in your design, but you want to create more colours from that one colour. This is when you can use a tint, shade, or tone. The image below shows an example of what happens when you add white, black, and grey to the red hue.

Description: A three-part scale showing tints, shades, and tones of red.

Source: Bitesize. (n.d.). Colour: Tints, shades and tones. BBC. https://www.bbc.co.uk/bitesize/guides/z3bqycw/revision/9

You may also have heard of colours as being either warm or cool. If you cut the colour wheel in half vertically, the colours on the left half are considered cool colours, and the colours on the right side are warm colours. The image below shows is a good example of this. Generally speaking, warmer colours are vibrant and energizing, while cool colours are considered to be calm and relaxing.

Description: A colour wheel divided vertically along its centre. The left side has a light blue background while the right side has a beige background.

Source: Benjamin Moore. (n.d.). Using Warm & Cool Paint Colours. https://www.benjaminmoore.com/en-ca/colour-overview/colour-insights/warm-and-cool-colours

As I mentioned at the beginning of this blog post, different colours can evoke different feelings in people based on their own individual and cultural experiences, so it’s important to consider this context when working with colour.

My next blog post will cover additive and subtractive colour theory and explore RGB and CMYK. In the meantime, check out this blog post from Hubspot called “Color Theory 101: A Complete Guide to Color Wheels & Color Schemes” if you’d like to learn more about colour theory basics.

Sources

Bitesize. (n.d.). Colour: Tints, shades and tones. BBC. https://www.bbc.co.uk/bitesize/guides/z3bqycw/revision/9

Cartwright, B. (2022, November 25). Color Theory 101: A Complete Guide to Color Wheels & Color Schemes. Hubspot. https://blog.hubspot.com/marketing/color-theory-design

Color Theory Basics: Part 1

What is a Learning Design System and Why Does it Matter?