Web Applications

Did you understand the basics about colours and their relationships? Then it's time to put them into practice. Examine the two following colour combinations:

• On the left-hand side, the combination is based on neighbouring colours and uses blue, red and magenta hues. The content is not legible at all.
  
  
If we examine the colours, we can see that they are totally saturated and have similar values.


• On the right-hand side, you have the same combination of neighbouring colours, with blue, red and magenta hues, but with different values and saturation levels. And this can be noticed!
  
  
The analysis of the colour combination now shows a wider range in terms of saturation levels and values.

Choosing a colour palette is not enough, whatever its type (with neighbouring, complementary or monochromatic colours). You have to learn how to balance values and choose the appropriate saturation level for a colour, in order to obtain legible hue relationships.

By first creating your image in greyscale, you can experiment with similar colours in terms of values and hues.




By finding the perfect balance between hue, value and saturation, you will make your main page elements more legible, while shading off the others. A good exercise based on these criteria is to preview your Web site in Photoshop or in any image-editing software using layers. Fill the layers with different shades of grey, instead of using colours, so that important contents stand out. Once you are finished with your page, replace the grey shades by colours. You will be surprised how efficient this exercise is.