Return to HomePage

Brightness, Contrast and Saturation

In my Notes on Colour Spaces, I described how the overall 3-dimensional colour space can be separated into ‘brightness' (or 'luminance') and ‘chromaticity’. This separation allows the two dimensions of 'Chromaticity' to be displayed as a colour chart.

In this discussion, I consider the other dimension: 'Brightness', and how the various controls in an image editor such as Photoshop Elements influence both brightness and chromaticity.

Specification of Colour and Brightness in the sRGB Colour Space

To simplify the following discussion of sRGB colours, I have reduced the number of available colour values to five each of red, green, and blue. This gives a digitised colour space within the sRGB triangle of 5 x 5 x 5 = 125 individual colours. This is a more manageable number than the 16,777,216 individual RGB values (256 x 256 x 256) within the 8-bit colour space used by computer monitors.

For my simple representation, the Brightness values of the primaries are digitised in five steps (0%, 25%, 50%, 75%, and 100%). All the colour values obtained by mixing the primaries of reduced brightness levels can be displayed in a three dimensional figure having five layers, with each layer corresponding to one value of the digitised primary brightness. With this low-resolution digitisation, the successive layers of the chromaticity space are shown in the animated Figure 1:

Figure 1 - sRGB chromaticity space with each colour allowed five values

All the colours on the 100% brightness plane are mixtures of primaries having the maximum intensity of 255 and, at my chosen resolution, there are 61 different RGB values, each represented by a coloured circle.

When the brightness is reduced to 75% of the maximum, then the RGB values in those colours on the outer rim of the chromaticity plane become identical to the next inner row, so that they no longer represent distinct colours. There are 37 different RGB values on the 75% brightness plane. Similarly, there are 19 values on the '50%' plane, and 7 on the '25%' plane. Taken together with Black (0,0,0), the number of different colours at this digital resolution can be seen to add up to 125.

In the following sections, I shall demonstrate what actually happens when the ‘Brightness’, ‘Contrast’, and ‘Saturation’ controls are altered in an image editing program. In order to make effective use of these controls, it is important to realise that they are, to some degree, interactive, so that changes in brightness or contrast, for example, will also affect saturation of the image.

Controls in Adobe Photoshop Elements

Photoshop Elements provides controls for 'Brightness', 'Contrast', 'Saturation', and 'Levels'. I find that the controls don't always do what I expect and their effects interact with each other. To illustrate these effects, I have taken the sRGB colour space described in my Notes on Colour Spaces and applied the different Photoshop controls, as shown in Figure 2.


Figure 2 - Effect of Applying Photoshop Elements Controls to a Colour Space

Exactly what Figure 2 looks like will depend on your monitor settings but you will probably notice that increasing the 'Brightness' has caused obvious colour shifts, especially in the blue/green area, while reducing 'Saturation' has not produced anything like a 'black and white' monochrome image of the original colour space. Increasing the 'Contrast' has produced some sharp colour boundaries, with areas of fairly constant colour in between, whereas decreasing contrast is fairly similar to decreasing saturation.

In many cases, when using Photoshop to 'improve' an image, I find that the 'Levels' control is the most useful of all these Photoshop controls. This control fixes the maximum and minimum RGB values in the image and only adjusts the intermediate values.

In the following pages, I have looked at the Photoshop controls individually and the pitfalls than can occur if they are not used appropriately.