Colour Systems

The Colour Cube

It is well known that every colour which can be depicted on a colour monitor is defined by three components: red (R), green (G) and blue (B) each of which can take any value from 0 to 255. This enables a staggering number (16,777,216 to be precise) of different colours to be created. (Even so, this is not all of the colours that can be distinguished by the human eye and many colours which have different RGB components look exactly the same as well so the mapping between all the different colours that the human eye can see and those that a computer can generate is not perfect. We shall, however restrict ourselves to the latter set.)

It is convenient to represent each of these 16 million colours as a point within a cube whose three axes are the RGB components like this:

It will be noted that black and white are at the ends of the principal diagonal of the cube while the three primary colours and the three secondary colours (known as principal colours) lie on a wiggly line which threads through all the remaining six corners. When designing a 'colour picker' for use in a painting program, it is impossible to show all the colours of the cube simultaneously on a two dimensional screen so it is usual to show some kind of 'slice' through the cube and to provide a slider which can move the 'slice' up and down. For example, in the RG – B system, the 'slices' are horizontal planes parallel to the RG plane and the slider is the B component. This produces the following types of figure:

The RG – B system

B = 0 B = 128 B = 255

The advantage of this system is that it is immediately clear what is going on and each 'slice' presents an interesting palette of colours from warm to cool.

There is, however, no reason to single out the blue component in preference to the others. We should, therefore also provide two more systems the GB – R system and the BR – G system in which the red and green components can be altered independently. It turns out, however, that the palettes produced by these systems are even more garish and, although in my opinion the RG – B system is the best, it is not easy to find subtle shades like olive drab or pale lilac in any of them. The reason for this is that every point in the square is a totally different colour in that it has a different balance of red, green and blue components. What we need is a system in which one of the components represents this balance of primary colours. This component is called hue.

Hue (H)

H stands for hue and determines what I shall call the base colour. Base colours have one component equal to 0 and another component equal to 255. The third component may be anything from 0 to 255. It is easy to see that all the base colours lie on the wiggly line which I referred to earlier which threads it way past all the primary and secondary colours. If we could flatten it out we would obtain a hexagon with the primary and secondary colours (ie the principal colours) at the vertices. Better still we can mould it into a 'circle of hues' like this:

By convention, red is placed at 0⁰, green at 120⁰ and blue at 240⁰. It is usual for the third component to change linearly from one principal colour to the next so that at 30⁰, for example, half way between red and yellow, the green component will have the value 128. There is no necessity for this function to be linear, however. In fact, the eye is much more sensitive to small changes around the secondary colours than it is to changes round the primary ones. To put it another way, (255, 245,0) differs more greatly from yellow (255,255,0) than (255,10,0) differs from pure red (255,0,0). I have found that a quadratic function spreads the secondary colours and greatly improves the balance of colours round the circle. To see what I mean, compare the following two figures:

Linear Quadratic

Systems which use hue as one of their components are called 'cylindrical' or 'conical' systems.

There are two common ways of depicting such systems. The traditional way is to plot the hue round a circle as in the above diagrams; to plot one of the other components radially and to set the third component by means of an independent slider. It is also useful sometimes to allocate the hue to the independent slider and to plot the other two components in a square. Here is an example of a system plotted in three different ways.

Hue and saturation Hue and value Saturation and value

The HC – X system

In the HCX system, colours whose extra brightness is zero (X=0) are black. As the value is increased the colours emerge from the shadows as it were. All the base colours have X=128. The following colour wheels show the effect of increasing the value. (Incidentally, the contrast component (C) increases from 0 in the middle to 255 at the edge. The base colours are shown round the edge for reference.)

X = 64 X = 128 X = 192

The HX – C system

In the HCX system, C stands roughly for 'colour contrast' while X stands for 'extra brightness'. Colours whose contrast is zero (C=0) are shades of grey. As the contrast is increased, the colours become more colourful. All the base colours have C=255. The following colour wheels show the effect of increasing the saturation. (Incidentally, the 'extra brightness' component (X) increases from 0 in the middle to 255 at the edge.)

C = 64 C = 128 C = 192

The HV – S system

In the HSV system, colours whose saturation is zero (S=0) are shades of grey. As the saturation is increased, the colours become more colourful. All the base colours have S=255. The following colour wheels show the effect of increasing the saturation. (Incidentally, the value component (V) increases from 0 in the middle to 255 at the edge. The base colours are shown round the edge for reference.)

S = 0 S = 128 S = 255

The HS – V system

In the HSV system, colours whose value is zero (V=0) are black. As the value is increased the colours emerge from the shadows as it were. All the base colours have V=255 of course. The following colour wheels show the effect of increasing the value. (Incidentally, the saturation component (S) increases from 0 in the middle to 255 at the edge.)

V = 0 V = 128 V = 255

The HK – L system

L = 0 L = 128 L = 255

It will be noticed that lambda (L) is similar in a way to value (V) in the HSV system in that it alters the 'brightness' of the colour – but instead of starting in the shadows and increasing to full intensity, here the colours start at full intensity and then get lighter ending in pure white. Unlike value, however, useful colours are obtained with the full range of lambda because, as has already been pointed out, pastel shades are far more useful than dark colours. I have called this component 'lambda' precisely in order to get away from pre-conceived notions attached to words like 'saturation' and 'value' – but if you want an English word to remind you what altering lambda does, I suggest thinking of the word 'lightness'. As with all the other colour wheels, the third component is plotted radially. This component is kappa (K) and as you can see, at the centre where K=0 we get the greyscale colours with the most colourful colours on the periphery where K is maximum. For completeness, here are three colour wheels showing the effects of changing K on its own.

The HL – K system

K = 0 K = 128 K = 255

Unlike the colour wheels generated by the HK – L system, I do not think these have a great deal to recommend them but they are interesting nonetheless. They clearly show that kappa controls what we might call the 'colourfulness' of the colour and in that respect acts a bit like saturation in the HSV system.

The HP – Q system

Q = 0 Q = 128 Q = 255

The HQ – P system

P = 0 P = 128 P = 255

The last two systems are a compromise between the HSV and HKL systems. P and Q do not have obvious meanings but, mathematically speaking, Q pulls the colour towards black while P pulls the colour towards white.