Colour Matching Game

from Michael’s   Visual Phenomena & Optical Illusions


What to see

In the adjoining demo you see in the left part two coloured squares atop each other. The lower one is the target colour, the one you’ll want to match. It is randomly selected each time you press Reset. The upper colour square (preset to blue) is the one you can change with the three mixing sliders.

Initially the mixing sliders control an RGB space: left for red, middle for green, right for blue.

With the pop-up at the very top you can alternatively select the HSL colour space, where the letters stand for H=hue, S for saturation (=“strength” of the colour), and L=lightness (similar to brightness).

If you find all of this bewildering and difficult, welcome to the club! I’ve spent decades on it…

What to do

Effectively, you can see this as a game: can I match the colour, and if so, how fast?

Try to match the colour at the left bottom with the left top colour. You will need to use all three sliders with normal colour vision: human colour vision is trichromatic or three-dimensional.

The bar below the slider indicates similarity on a %-scale. You can turn this into a competition: the similarity goal can be changed (preset to 10%), and Reset starts a seconds timer next to it. Who can reach threshold faster?


RGB colour space
RGB colour space
(images from Wikipedia)
HSL colour space
HLS colour space

When you switch to the HSL colour space, the sliders take on different roles. You can compare this to the two controls on you HiFi: typically, you have one control for volume, another for balance. Alternatively, you can have a volume left / volume right arrangement. With both setups, you can cover the entire “audio space”, but in different ways. It is very similar with these two colour spaces (RGB vs HSL), and for added complexity there are even more colour spaces…

The RGB colour space is typically the one our displays and computer projectors are based upon. It resembles a cube (see left figure). The HSL colour space is a cylinder, a horizontal section through it will reveal a colour wheel. That is rather natural, as our hue space is circular: red-yellow-green-blue-violet-red… The left slider does, of course, a poor job for a circular measure. You will notice that red appears both at the top and at the bottom. If saturation or lightness are at zero (bottom), the colour is black regardless of the hue setting.

While the HSL space is a little more physiological (circular hue parameter), a double cone shape or a ball would be even closer: for very dark and very bright colours we perceive less saturation. One good colour space is the L·a·b variant.