Defining Colours

From colour space to colour code

• Additive and Subtractive Colour Models
• RGB Colour Space
• HSL Colour Space
• Colour Names and System Colours

Additive and Subtractive Colour Models

Colours are usually described in terms of additive or subtractive colour mixing. Additive colour mixing applies to light and adds the basic colours red, green and blue. The initial colour in this model is black. Differing values of each basic colour lead to different new colours. If all three are added together, the resulting colour is white.

In contrast to this principle subtractive colour mixing applies to printing. Here the initial colour is white. Subtraction differing values of the colours cyan, magenta and yellow lead to new colours. Subtraction of all three colours result in black. Both colour models are diametrically opposed to each other as the following images illustrate.

additive colour mixing

subtractive colour mixing

The colourspace is a means to identify and refer a colour. Best known colourspaces are the RGB-colourspace which is used for e.g. screen media and thus applies for web-authoring, and the CMYK-colourspace used for e.g. printing.

The RGB Colour Space

As mentioned above, the RGB-colourspace adds the three basic colours Red, Green, and Blue to result in an infinite variety of new colours. Each basic colour contributes with a saturation between 0% and 100% to the new colour. The following values describe exactly one colour of the RGB-colourspace. This colour is located at point A in the illustration to the right.

Red  : 60,06%
Green: 50,64%
Blue : 70,56%

A grafic programme like The GIMP enables one to determine the appearance of the colour defined by the above values. Actually we are not able to obtain the exact colour due to rounding. Read on to see why this is the case.

Computers calculate values on the basis of binaries instead of the decimal system. Consider assigning 1bit for each of the basic colours red, green, and blue. This means, each colour may have a saturation of 0% or 100%. The resulting colour space would consist of any possible combination of the basic colours, adding up to eight colours. There does actually exist a small colour space or palette of 16 colours, the VGA-palette, which is the minimal standard for colour screens. To be able to generate more complicated colour shades and progressions or present photographs a more sophisticated colour scheme is needed. This is achieved in assigning not just 1bit but 8bit to each basic colour. As 1bit has one of two possible values there are 16 possible values for 8bit which can be combined in any possible way resulting in 16² = 256 shades of a basic colour. Thus each of these 256 values expresses a saturation of the colour in question comparable to assigning percentage values. But, whereas a colour space based on percentage values allows for virtually any saturation of each of the basic colours resulting in an infinite and analog colour space, 8bit-values allow only a finite number of colours having discrete values and resulting in a digital colour space.

Combining the 256 possible saturations of each of the basic colours leads to 256³ = 16,777,216 colours. This 24bit-colour scheme is used by most computers and monitors nowadays. You will probably be more acquainted with the name TrueColor for this scheme.

Let us now see how a colour of the 24bit colour space can be described:

Red  : 127
Green:  88
Blue : 214

To determine the appearance of this colour we again refer to our grafic programme.

It is remarkable that although there exists this vast number of over 16 million colours there are only a couple of pure greyscale colours present in this colour space. Shades of grey result from mixing equal values of red, green and blue. As there are 256 possible shades of each basic colour there exist 256 shades of grey for the 24bit colour scheme (the theoretical analog rgb-colour space would yield an infinite number of greyscales).

Now we have learned how a colour can be described in terms of its values. To use colours in web pages some kind of notation is needed for a browser to parse and render it accordingly. Actually there exist a couple of possible expressions, listed below:

1. rgb(Red,Green,Blue) referring to the above example, rgb(127,88,214). In this expression the values of the basic colours are comma separated and put in parenthesis with the keyword rgb standing in front of these.

2. A more common expression uses a hexadecimal notation instead of decimal values. The corresponding colour code for the above example is expressed, with Red 127_dec → 7F_hex , Green 88_dec → 58_hex and Blue 214_dec → D6_hex :

   Hexadecimal example: #7F58D6.

   Both uppercase and lowercase lettering is allowed in this hexadecimal notation #7F58D6 = #7f58d6.

   We see that the hexadecimal values for Red, Green, and Blue are listed following an octothorpe # without any whitespace, separator or quotation marks. A leading zero 0 is mandatory for single digit values.

3. If a hexadecimal colour code is made up of symmetrical number pairs we are allowed to use a shorthand notation. The colour code #77AA44 thus becomes #7A4. The colour space which is expressed by using this shorthand can be viewed at 4096 Symmetrical Number Pairs

4. rgb(Red%,Green%,Blue%) Another possibility is to use percentage values to denote a colour. However, as these values are transformed to 8bit values during parsing and rendering using the approximate factor 100/255 = 0,3921568627450980..., this might lead to differences between the intended and the rendered colour. Only values of 0%, 20%, 40%, 60%, 80%, and 100% need not be rounded during this calculation and therefore their 8bit-value rendered colour presentation is identical to the intended percentage value colour presentation.

   I have included a palette of 1331 colours using steps of 10% between two colour values for your convenience.

The 24bit colour scheme allows for choosing from over 16 million colours. You should however keep in mind, that a variety of imponderabilities influence the actual display of a colour. Some factors playing a major role are the user agent of the visitor, the operating system, the grafic card, screen resolution and last but not least the monitor itsself, especially the differences between CRT-displays and LC-displays.

Luckily enough some sort of standard has been established for most operating systems and user agents, the 216 colours sometimes labeled as the Netscape palette. This colour scheme is reduced to the 6³ = 216 combinations of the basic colours Red, Green, and Blue with 0%, 20%, 40%, 60%, 80%, and 100% (≙HEX: 00, 33, 66, 99, CC, FF) saturation. If you want to be on the safe side, you should restrict yourself to this palette.

The HSL Colour Space

A somewhat different approach defining colours in the rgb-colour space is by using HSL values. The above examples defined a colour via the amount each of the three basic colours contributed to it. Using HSL values is a more practical approach in so far as they allow for easy shading and greyscaling of a given colour.

The meaning of each of these values is as follows:

This simple colour scheme allows for defining 360 hues * 100 saturation values * 99 lightness values = 3,564,000 colours, plus 101 greyscales.

HSL values are expressed using hsl(h,s%,l%), e.g. a medium purple has the value hsl(300,100%,75%).

This notation is part of the CSS3 Color Module which is a Proposed Recommendation since May 2003. Latest Gecko Browsers like Mozilla 1.6, K-Meleon 0.8.2 , or Firebird 0.7/Firefox 0.8 are able to render these values.

I have included a palette of 3564 colours which allows you to choose all sorts of different shades of a given colour, and for transforming HSL values to RGB values and vice versa I have written a small calculator which you might find useful.

Colour Names and System Colours

Last not least HTML offers the possibility of using colour names or system colour names for attribute values. However, CSS2 does restrict the use of colour names to 17 names. Apart from that, user agents might not be able to identify the name in question. Have a look at the colour names palette for more information about CSS colour names and rendering in common browsers.

System colours are expressed by key words referring to the GUI of the user. Using system colours for web pages is quite tricky as the author never knows the actual appearance her page will have on other systems. I recommend to use these names only if you really know what you are doing. The System Colours Palette lists the system colour names and shows the settings for your system. Compare them with my settings and ponder about the dangers implied when using these names.