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

You can play 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 because normal human colour vision is three-dimensional or “trichromatic”.

A bar below the sliders appears after a sufficiently close match was achieved and 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?
[As an aside: our grandson and friends played this and were amazingly good. It took me a while to find that they did not look at the colours, just at the similarity slider :). That’s why the slider is now initially hidden…]


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

There are various “colour spaces” as approximation to the gamut of all colours we perceive. Here you can switch between the “RGB” and the “HSL” colour spaces.

Switching between these two assigns dfferent roles to the sliders. You can compare this to the two controls on your 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 sphere would be closer: for very dark and very bright colours we perceive less saturation. One good colour space is the L·a·b variant.