Colour Theory 5 lessons
  1. 1 Three things, not one
  2. 2 Building a palette that holds together sign in to open
  3. 3 Contrast, and the people you are leaving out sign in to open
  4. 4 What colours mean, and to whom sign in to open
  5. 5 Colour in practice, screen and print sign in to open
Course overview
Data: video · change

This lesson: 122KB

Colour Theory · Lesson 1 of 5

Three things, not one

Describe colour precisely enough to control it.

Most colour problems come from thinking of colour as one property. It is three, and separating them is what turns guessing into deciding.

Hue is the colour itself, red, blue, green, the thing people name.

Saturation is how intense it is, from a vivid version of that hue to a grey version of it.

Lightness is how light or dark it is, from near white to near black.

Almost every palette that does not work is wrong in the second or third, not the first. Colours that clash are frequently the right hues at saturations that fight, and a palette that looks muddy is usually several colours at nearly the same lightness.

This is why the colour picker with the rainbow strip and a square is built the way it is, and once you see the three properties separately, that square stops being random.

Vivid colours are exhausting in quantity and are used as accents rather than as backgrounds. A design where everything is fully saturated has nowhere to put emphasis.

Lightness is what carries readability, and it is the property to check first when text is hard to read. Two colours at the same lightness have almost no contrast even when their hues look very different, which is invisible to most people until they convert the design to greyscale.

Do that conversion regularly, because it shows you the structure underneath the colour.

Lab — try it yourself

Convert your design to greyscale. If the elements disappear into each other, the problem is lightness rather than hue.

Check what you learned

Create your free BvLogic ID to take the quiz and record your score.

Create your BvLogic ID
Continue to lesson 2 Up next 2. Building a palette that holds together