Paint Shop Pro Tutorial
Colour in web pages and presentations - 1
Colour is an important aspect in most of our lives. The change from monochrome to "full colour" in photography, television and print improved the presentation and appeal of all these media. Colour and images permit information to be displayed in considerably smaller areas than is otherwise possible.
The effect of a colour depends on its
- hue (ie the shade or tint of a colour),
- saturation (the "purity" of a colour, or how much grey it contains) and
- brightness.
The environment surrounding a colour also affects how human eyes perceive colour - textures, adjacent or nearby colours, the size of a coloured area, or even images the eye saw previously all affect what we see in an image.
Light is a combination of all wavelengths of electromagnetic radiation that our eyes can process. Perception varies from person to person. Additionally, a significant proportion of the population has restricted colour perception ("colour blindness"). We cannot assume that something pleasing to us will be appealing to everyone.
We usually think of primary colours (red, yellow and blue) as those that can't be produced by mixing
other colours. Secondary colours result from mixing the primary colours. All other colours grade
between primary and secondary colours that are adjacent on the colour wheel.
However, we are designing images
for the computer screen, dealing with reflected light and its colours.
The classification of light as appropriate to computer images is therefore slightly different.
We consider red, blue and green (the colours underneath the letter A in the colour wheel in the figure)
to be the additive primary colours because these three combined produce
white on screen. Cyan, magenta and yellow combine to produce black on the screen, and are therefore
known as the primary subtractive colours (underneath S in the figure).
Colour values
The various colours can be represented as a continuum from red to violet in various ways. These are illustrated in Paint Shop Pro's Color dialog, shown below. Each of the colour schemes in the colour dialog (RGB, HSL, HTML code and colour wheel position) refer to the same colour. The codes that are used to display colours on electronic media are are determined by your image software as
- RGB: This is most often used for colours displayed on electronic equipment. The colour of each pixel on the screen is represented as independent values for red, green and blue. The RGB value represents the relative intensity of each of the Red, Blue and Green colours. Intensity of each colour is scaled from 0 to 255, with 255 representing maximum intensity of the colour. White has a RGB value of (255,255,255) while black has a RGB value of (0,0,0,).
- HSL: This is a measure of the wavelength of the light (Hue), or "colour" as we generally use the term; the intensity of the colour(Saturation; and the brightness of the colour (Luminance, or Lightness), which is related to the relative amount of grey in the colour. Each of these values also ranges from 0 to 255, with white having S=0 and black with both S and L values equal to zero.
- "HTML code": This is the hexadecimal notation for RGB values, which is important in specifying background colours in web pages. Each of the red, green and blue colour values are calculated to base 16. Hexadecimal notation uses the letters a through f to represent the decimal numbers 10 through 15 respectively.
Converting RGB values to HTML colour code
To convert RGB values to HTML code, you divide each value by 16 and then convert the answer and remainder to their hexadecimal notation. Say, for example, we want to know the HTML code for a colour with RGB values of (192,150,46). This is an orange-tan colour.
- To work out the red value as a hexadecimal, divide 192 by 16. This is 12 with no remainder. The second hexadecimal digit in the red value is therefore 0. The first digit is the hexadecimal representation of 12, ie c. The first two digits in the HTML code for this colour are c0.
- For the green value we divide 150 by 16. The answer is 9 with remainder of 6. 6 is the second digit in this number's hexadecimal code, with 9 the first number.
- For the blue value, the same process yields 2e. Remember that the (decimal) number 14 is represented by e in hexadecimal notation.
All that is required is to put these three values together in red-green-blue order: the HTML code for the orange-tan colour with RGB values (192,150,46) is #c0962e. This code is prefaced with the # symbol to indicate that it is an HTML colour code.
The colour wheel shows the relationship between colours. The relative position of colours on the colour wheel is an indication of how they will work together.