Colour Theory Basics: Part 2
Understanding Colour Theory in Digital Spaces: What Instructional Designers Need to Know
This is part two of a two-part series on colour theory.
When you're creating digital learning experiences, colour plays a big role in how learners engage with your content. But not all colour is created equally—how it appears can change depending on the screen, the software, or whether you're designing for print or digital. That's where colour theory and colour models come in. Two major ones you'll often hear about are RGB and CMYK.
RGB stands for red, green, and blue. These are three light-based colours used to create everything you see on a screen. When you mix them together in different intensities, you get every other colour. If you mix all three at full strength, you get white. If you don’t use any of them, the result is black.
-
A colour models infographic that consists of representing colours and colour gradients in five ways.
The first is the RGB or Red Green Blue model that shows a Venn Diagram of colours. There are three circles, one each for red, green, and blue. Where they overlap are new colours. Yellow where green and red overlap, cyan where green and blue overlap, and magenta where red and blue overlap. In the centre, where they all overlap is white.
The next colour model is the CMYK or Cyan Magenta Yellow Key colour Venn Diagram of colours. Again there are three circles, but these are yellow, cyan, and magenta. Where yellow and magenta overlap is red; where magenta and cyan overlap is blue; and where yellow and cyan overlap is green. In the centre is black, or the key colour.
The next colour model is the RGB Colour Wheel which is a circle filled with gradients of colours. The main and dominant colours are red, green and blue, with yellow, cyan, and magenta in between them, with all of those colours mixing together to form gradients of other colours, such as orange or purple.
The next colour model is the HSL and HSV gradients. HSL means hue-saturation-lightness and HSV means hue-saturation-value. Each of these is a horizontal bar of colour gradients. At the bottom of both is black and across them left to right is red, yellow, green, cyan, blue, and magenta with gradients of colours in-between each. At the top of the HSL bar the colours blend to white, while at the top of the HSV bar, the colours remain saturated, or do not blend to white. Therefore, the HSL gradients have lighter colours while the HSV gradients have darker colours.
The final colour model shown is just a vertical bar of colour gradients similar to the RGB colour wheel as if the outer edge of the circle was converted into a strip.
Source: iStock
This model is called additive colour because you’re adding light to create colour. It’s used for:
eLearning courses;
Web-based content;
Videos; and
Presentations on screens.
So, when you're working in digital tools like Rise, Storyline, Canva, or websites, you're designing in RGB.
CMYK stands for cyan, magenta, yellow, and black (K). It’s what printers use. Unlike screens, printers don't shine light, they reflect it off ink on paper. That’s why this is called a subtractive colour model—you’re subtracting light by layering inks.
-
A CMYK colour guide for a printing press. There are wide bands of each colour: yellow, magenta, cyan, and black. At the end of the cyan and black bands are alignment crosshairs being viewed through a magnifying device. Then there is a band parallel to black with blocks of the primary colours in different saturations, and parallel to this is another band of grayscale blocks.
Source: iStock
Other Helpful Colour Models
HSL or HSV: These models (Hue, Saturation, Lightness/Value) help you adjust colour more intuitively. They are great for picking complementary colours or creating themes in your learning design tools. Read Part 1 of this colour theory series to learn about colour combinations.
Pantone (PMS): Used for precise colour matching in print, Pantone colours are used for brand colours or materials that need to look exactly the same across different print items.
When you're designing something and you're trying to pick “just the right blue,” it can be frustrating to work in RGB because it’s based on numbers for red, green, and blue light—which isn’t very intuitive. That’s where HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) come in.
These colour models are designed to make more sense visually and emotionally. This is how we actually perceive colour.
Hue is the colour itself (like red, green, or blue) and is usually measured in degrees on a colour wheel (0 to 360).
Saturation is how intense or pure the colour is. High saturation = bold colour. Low saturation = more gray.
Lightness (in HSL) or Value (in HSV) controls how light or dark the colour appears.
-
HSB and HSL colour gradients are shown. They both include three horizontal bars. The first two are the same: hue and saturation. But the third is different. For HSB, it is brightness; for HSL it is lightness. Although they have different names, they are showing the same thing.
The hue bar is a colour gradient like those previously described of red, yellow, green, cyan, magenta, and red with other colour gradients in between. Hue is labelled zero degrees on the left at red and 360 degrees on the right at magenta.
Saturation shows a bar that is light gray on the left labelled 0% and blue on the right labelled 100%.
The brightness and lightness bars are black at the left labelled 0% and light gray at the right labelled 100%
Source: iStock
So, why does this matter in eLearning?
Tools like Adobe, Canva, Figma, and even PowerPoint often let you adjust colour using HSL or HSV sliders. It makes it easier to create consistent colour palettes (e.g., keep the same hue but change lightness for hover states or background variations). It's great for ensuring readability and accessibility—you can easily adjust colours to increase contrast without losing your theme.
The Pantone Matching System (PMS) is a standardized system used mostly in the print world. Every colour in the Pantone system has a unique code, like Pantone 358 (a light green) or Pantone 350 (a dark green).
Printers use these codes to make sure your colour looks the same every time, no matter the printer, location, or paper type. If you’re working with a client who has strict brand guidelines, their brand colours may be listed in Pantone. Alternatively, clients may send you HEX codes for their brand colours that you can use for online learning. You’ll want to match colours as closely as possible in your designs if you're creating printed handouts or branded workbooks. Use Pantone codes to ensure that printing matches what's expected. If your design will live both online and in print, you’ll need to convert Pantone to both CMYK and RGB versions to keep branding consistent across formats. Some free, online tools can help you convert Pantone colours.
As a learning designer, knowing how colour works helps you maintain visual consistency between digital and printed materials. It can make accessible design choices (e.g., ensuring colour contrast is readable). It can also help you communicate effectively with graphic designers and developers.
Even if you’re not a graphic designer yourself, understanding the basics of colour theory means fewer surprises—and more professional, learner-friendly content.
Sources
HSL and HSV. (2025, March 25). In Wikipedia.
Madsen, R. (n.d.). Color models and color spaces. In Programming Design Systems.
Pantone. (n.d.). What Are Pantone Color Systems?
