Designing for the Web

Chapter 17

Hue, Saturation and Brightness

Describing colour can often be confusing.

Describing colour can often be confusing. How would you describe brown? Darker than red, or more muddy than peach but with a bit of red in it, oh and some yellow.

Having some standard terms to help you describe and organise colour would be a useful thing at this point. Enter hue, saturation and brightness. Hue, saturation and brightness are ways to organise and describe colours.

Hue

Hue refers to a specific tone of colour. It is not another name for colour as colour can have saturation and brightness as well as a hue.

Saturation

Saturation refers to the purity, or intensity of a colour. It is the intensity of a hue from grey. At maximum saturation a colour would contain no grey at all. At minimum saturation, a colour would contain mostly grey.

Brightness

Brightness refers to how much white, or black, is contained within a colour.

The illustration above shows the difference between saturation and brightness. We first pick a hue from the colour wheel and then reduce the saturation so that the colour becomes more and more grey. Then picking a lesser saturated tone, you can see that by adding white or black, the brightness of the hue is affected. An important thing to notice is that increasing brightness is not the same as decreasing saturation. Decreasing saturation turns the colours into shades of grey, increasing brightness turns the hue lighter but without making it grey. This can be seen more clearly when the same theory is applied to a photograph.

Here you can see a photograph which has had no tampering on the left. First of all, I'm going to decrease the saturation of the yellows in the photograph. You can see that the yellows have now turned to greys.

If I increased the brightness at this point, the yellows retain their new grey feeling, but just become lighter. Similarly if I decrease the brightness – in effect add black – then the yellows retain their grey colouring and just turn darker.

Now, If I take the original photograph again and increase the saturation of the yellow, the yellows become more pure and more vibrant but more importantly, they become more pure and more vibrant because they contain less grey. I'll go through the same process again and alter the brightness. The colours, as you would expect, retain their new saturation but the white and black content is altered accordingly.

More from this part

Back to Table of Contents

Download the book

Download your FREE copy of Designing for the Web.