Page 77

Designing for the Web ~ Colour

143

144

Saturation The illustration shows a grid of colours based on Hue.

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. left: Original right: Decreased Saturation of Yellow.

Brightness

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.

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.

This can be seen more clearly when the same theory is applied to a photograph.

licensed to Denis (1 user license)

Profile for anh7

Five simple steps designing for the web  

Designing for the web

Five simple steps designing for the web  

Designing for the web

Profile for anh7
Advertisement