Colour Basics

The description of colour is subjective and based on the perception of the human visual system. Colour is the sensation produced on the eye by rays of light reflected or emitted from an object. Only a narrow band of the electromagnetic spectrum (between ultra-violet and infra-red), contains visible light. White light consists of radiation at all wavelengths of the visible spectrum. “White” occurs when all colours are reflected, while “black” results from the absence of all colour because all light is absorbed. Colour occurs only when a limited part of the spectrum is isolated. As observed in a rainbow, or by the use of filters or a prism, white light can be separated into the colour spectrum of red, orange, yellow, green, blue, indigo, and violet. Out of this understanding comes the concept of primary colours.

Primary colours, when combined in different ways, result in a broad range of colours. Many types of primary colour sets exist, the principal sets being additive and subtractive.

The additive primaries, (red, green, and blue) when projected together as beams of coloured light, as used on a computer monitor or television screen, will mix or overlap to produce other colours.

[D]
Click for more information, 3 KB
Figure 1. Image of the Additive Primaries

The subtractive primaries (cyan, magenta, and yellow), are used to create colour separations for photography and printing. In subtractive colour mixing, pigments such as ink or paint absorb or subtract all the colours of the spectrum except the colour that the pigment reflects to the eye.

[D]
Click for more information, 2 KB
Figure 2. Image of the Subtractive Primaries

These additive and subtractive primary colour sets form the basis for colour models.

Colour models, colour spaces, or colour order systems, are methods of organizing the set of possible human colour perceptions in a systematic way. With these methods, colours or their attributes are expressed numerically. A colour space is a 3-D geometric representation of the colours that can be produced using a certain colour model. Colour models can be divided into two main categories, perceptually-based and display-based (device-dependent).

(1) Perceptually-based models such as HSB (hue, saturation, brightness), or HLS (hue, lightness, saturation) are organized in a way similar to how humans perceive colour in everyday experience. Hue is the name of the colour, e.g., orange or green. Saturation or chroma, is the relative purity of the colour on a scale from grey to its most vibrant tone. Brightness or lightness refers to the amount of light energy creating the colour. In computer draw or paint applications HSB and HLS are expressed as percentages.

(2) Device-dependent models (or display-based models), such as RGB (red, green, blue) are used to create the appearance of millions of colours on a computer monitor or television screen by combining different values of red, green, and blue. RGB is an example of a device-dependent colour model because the appearance of the colour produced depends on the settings of the display device. Each device, whether it be a computer monitor or television screen, emits a slightly different shade and intensity of red, green and blue light. In the RGB system each colour component of a pixel (picture element) is measured by a number from 0 to 255, for a total of 256 (as "0" is a valid number). The RGB model is also used in colour scanners and colour photography. However, this model does not work well in the printing process.

The CMY (cyan, magenta, yellow) model is a subtractive colour model that complements the RGB additive model. CMY separations of the model are used in printing because the process it is based on involves light reflecting from colours, such as those contained in a printed image on paper. However, the combination of CMY in full values does not produce a pure black colour. Therefore, black must be added to the separations, resulting in the CMYK colour model, where “K” refers to black. “K” is used instead of “B” to represent black to avoid confusion with the colour blue. Also, “K” may refer to “key”, as black often forms the keyline to which other colours are registered. The CMYK model forms the basis for process printing. Also used in printing are spot colours which are custom, premixed inks of a particular colour, for special requirements.

[D]
Click for more information, 3 KB
Figure 3. The CMYK Model

Colour management is a major concern in the distribution of digital imagery, on the Internet and in the graphic arts industry, right up to and including the printing stage. In the graphic arts industry the difficulty of managing colour fidelity has been handled quite well. Reference standards, tools, and practices have been developed. The CIE (Commission Internationale de l’Eclairage) colour models developed in France since 1931, serve as a foundation for colour management systems in the publishing industry. Application of CIE in the graphic arts field is of particular importance now with the wide use of desktop computer publishing. CIE uses precise spectral measurement of colour values with reference to how the human eye perceives colour, rather than the way colour is interpreted by colour scanners, or rendered by monitors. In other words, CIE is device-independent. A colour management system using CIE can adjust the colour relationships between various scanners, monitors, printers, imagesetters and printing presses to ensure consistent colour throughout the print production process.

Graphic File Formats

The two main graphic file formats supported by all current Web browsers are GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group). Both of these graphic file formats can store bitmap (raster) images for transfer and display on the World Wide Web. Both formats use the device-dependent RGB colour model and both carry their own built-in adaptive colour palette, also referred to as a colour look-up table (CLUT). These graphic file formats store digital images of maps, photos, etc., as an array or grid of pixels (picture elements). Each pixel has an x,y coordinate defining its position on a display surface (computer monitor). Values describing its colour, based on the RGB colour model are also stored at each pixel. The number of bits of data contained in a single pixel colour value determines the number of different colours a pixel can display. This is known as pixel depth, or image depth. For example, a one bit image contains two colours, black and white, because there are two variables in a data bit, "0" or "1". A two bit image contains 4 colours because there are 4 different combinations of zeros and ones in 2-bit data (00 01 10 11). The mathematical relationship is exponential, the more bits of data per pixel, the greater the number of different colours available for the image.

The GIF graphic file format is used to store images containing 8-bits of data (2^8), or less, for each of the three colours (Red, Green, Blue) at each pixel. In other words, there are 24-bits of data to describe the colour of each pixel in a graphic for a possible total of 256 colours. The GIF format includes an adaptive palette, which can store a maximum of 256 colours. Pixel colour values are indexed, or mapped to this colour palette.

GIF is capable of storing multiple images in the same file, allowing for the creation of animated GIFs. Also, GIFs can store data in an interlaced order. Conventional (non-interlaced) GIFs download images one row of pixels at a time, starting from the top of the image and working down to the bottom. When 50% of the download is complete still only half the image is visible. When the file is stored as interlaced, the entire image appears to download all at once, creating a fuzzy-to-sharp rendering of the image, or animated effect. However, interlaced GIFs do not download faster than conventional GIFs, they only seem to. A more recent version of this format, GIF89a allows the designer to select one colour from the adaptive palette and have it appear transparent or invisible. Normally the colour made transparent is the background of the image. This function is performed in a graphic editing software (paint application). Recent versions of Web browsers now support animated, interlaced, and transparent GIF formats.

The GIF graphic file format is always compressed using the LZW (Lempel-Ziv-Welch) algorithm, and it is not free. A licensing fee is required for each software program that implements the LZW algorithm. LZW is a lossless compression method which removes inefficiencies in data storage without causing a loss of data. This compression method is most efficient in compressing graphic images with large areas of homogeneous colour. It is not very good at compressing complex photographic type images.

The JPEG graphic file format is used to store images containing 24-bits of data (2^24), for a total of 16,777,216 possible colours, also known as Truecolour. The JPEG file format also contains an adaptive palette. As with GIF, the JPEG format can store data in an interlaced order, this is called a progressive JPEG. JPEG uses a sophisticated mathematical technique of graphic compression. The designer can choose the level of compression applied to a graphic; huge compression ratios are possible. However, the more JPEG compression is applied, the more image quality deteriorates (and image data is actually lost). It is important always to save an uncompressed original image when working with JPEG compression, because data will be lost. This compression process is called lossy. When too much compression is applied, strange dots or blotches that were not visible on the original start to appear, called artefacts. JPEG compression does not work well with hard-edged graphics or bright colours (rarely encountered in photos). Patterns of noise develop around the edges of objects and transition areas between strong colours. It is possible to produce smaller, and faster downloading files with JPEG than with GIF, if one is prepared to accept the reduction in image quality.

[D]
Click for more information, 1 KB
Gifman

In general, the GIF file format should be used for graphic images such as maps, icons, logo, etc., or any image that has long horizontal runs of the same colour. The JPEG format should only be used for photographic quality (continuous tone) images where nearly every pixel carries a different colour. If a client is viewing a JPEG graphic on a computer monitor that has a video card that can support 24-bit Truecolour images then the image will look very similar to the original. On an 8-bit colour depth monitor (the majority of monitors), the same image will not look as good due to dithering. Dithering is the process of simulating the display of colours that are not available on the computer monitor. Patterns are created to simulate the missing colours by mixing grey scale pixel values with colour pixels. A GIF image will look the same on an 8-bit or a 24-bit monitor, if the image was created using colours from the browser-safe 216 colour palette.

Hardware and Software Basics

Four components work together to create the colours we see in images downloaded from the World Wide Web: computer hardware platform, video card, monitor, and browser. The hardware components and their settings determine the accuracy of colour display. The browser has an overall influence.

Computer Monitors and Cross-platform Issues

The three main computer operating systems that are involved in facilitating the Web are: Windows, MacOS, and UNIX. These operating systems run on a PC, Mac, or Workstation hardware platform respectively. The operating system and/or hardware platform that is in use has a direct influence on how Web graphics display on a computer monitor. In fact, the monitor itself and its settings greatly affect the appearance of graphics on the Web.

The majority of Internet users and those creating graphics for Web sites are using either PC or Macintosh computers. In regard to screen resolution, there are differences between PC and Mac monitors. First, screen resolution is measured and expressed as PPI (Pixels Per linear Inch); often mistakenly expressed as DPI (Dots Per Inch). (DPI is used to express printer and scanner resolution). A pixel is the basic unit of measurement in computer screen resolution and is also, the smallest unit constituting a bitmap (raster) image. The Macintosh display system has true WYSIWYG (What You See Is What You Get) and uses the 72 DPI typographic measurement system, so there are 72 PPI. On a Mac screen each pixel is one point square and each square inch of a graphic contains 72 x 72 (5184) pixels. The PC display system operates on the basis that an inch is represented by 96 pixels. An inch on a ruler displayed in a PC drawing, or paint application (possibly used to create Web graphics), will measure 1.3 inches on the screen. This difference between the PC and Mac display systems has a direct effect on the design of Web pages in the desktop environment. If a Web page or graphic has been designed on a PC it will appear wider and higher on a Mac screen. In regard to typography for example, text with a point size of 9 produced on a PC, will look like 12 point type on a Mac screen. However, when graphics created on a PC are sent to a printer the printout is the correct size. The term resolution is also used to describe the size of a monitor. Some typical monitor sizes are: 640 x 480, 1024 x 768, and 1280 x 1024. The first number refers to the number of pixels across the width of the screen, the second, to the number of pixels up and down the height of the screen. Often colour depth is included in the specification as a third value, expressed in bits (e.g., 640 x 480 x 8), or expressed as the actual number of possible colours (e.g., 640 x 480 x 256).

A monitor’s gamma setting is an important factor in the creation and appearance of Web graphics. Gamma is a measurement that describes the relationship between the computer monitor’s voltage input and the brightness of a displayed image. The gamma setting will primarily affect the degree of contrast between mid-level grey values of an image. If gamma is left uncorrected the design of colour images and how they look to the Web audience will be totally unpredictable. Graphics that look fine on a PC may look pale on a Mac screen and what looks good on a Mac will be too dark on a PC. Gamma settings range between 1.0 and 3.0. Computers that are used in the graphic arts industry, such as Macs and Silicon Graphics workstations, do have built-in gamma correction; the default is 1.8. Standard PCs do not provide gamma correction; uncorrected PC gamma is 2.5. To overcome this problem of cross-platform differences in image colour, a compromise gamma setting of 2.2 is recommended. On a Mac, a gamma setting of 2.2 can be made through the monitor control panel. On a PC, gamma setting cannot be adjusted unless the PC has an advanced video card, such as a Matrox Millennium, with gamma compensation facilities. Therefore, graphic design on a PC should be done inside an application that contains a gamma control panel, such as Adobe Photoshop, or Paint Shop Pro. Within the application environment a local gamma of 2.2 can be set.

Test your monitor's gamma setting:

[D]
Click for larger version, 0 KB
Figure 4. Test your monitor's gamma setting

If any of the first three rectangles looks almost black, your computer colour is not accurate and you need to upgrade your monitor and/or you need to correct your monitor's gamma setting. With corrected gamma, the first colour is a deep rich green, the second is a burgundy, and the third is a medium dark blue. The fourth rectangle should display as a pastel blue-green. If this last rectangle looks very pale, almost white, your gamma needs correction.

[D]
Click for larger version, 1 KB
Figure 5. Greyscale Test

In this greyscale test, you should be able to distinguish each of the nine different shades of grey. If the greys blend together, your monitor gamma or brightness needs adjustment.

Web Browsers and System Palettes

An Internet browser or viewer is an interactive computer program that allows the user to read hypertext and hypermedia, such as graphics. Often called a Web browser, it is used to navigate the World Wide Web. Examples of Web browsers are: Mosaic, Netscape, and Microsoft Internet Explorer. In the design of Web graphics it is important to understand how browsers display colour.

Ideally, all computers would have 24-bit Truecolour display capability. If this were the case, Web browsers could display GIF or JPEG images looking very similar to their original design. This would be true even if the originals were designed using custom colour palettes containing any of the 16.7 million possible colours. In other words, a Web browser running on a 24-bit colour depth computer system can correctly display all 16.7 million possible colours. However, a minority of Web users have computer systems with 8-bit colour depth and therefore, can only display a total of 256 different colours on their monitors.

[D]
Click for more information, 2 KB
Figure 6. The 256-Colour Palette

What happens when a Web browser running on a computer system with 8-bit (256 colour) video resolution encounters an inline GIF or JPEG image containing more than 256 colours? The browser solves this problem by using its own CLUT (colour look-up table) and the 256 colour palette of the computer’s operating system (Mac, Windows, or Unix). The browser forces, or re-maps, the range of colours in the adaptive palette of the image to conform to one of the colours in the system palette. The browser does this either by matching to the nearest colour (if the colours are not too different), or by dithering. However, the situation is complicated by the fact that the system colour palettes for Mac, Windows and UNIX are not the same. Each operating system reserves some colours for itself; Mac and Windows do not reserve the same colours, and Unix uses an altogether different palette. As a result, there are actually only 216 different colours available that are common to the Mac and Windows systems and Unix has only 125. Dithering distorts images on the Web and should be avoided. To avoid dithering, colours used in the design of Web graphics should conform to the browser-safe 216 colour palette that incorporates the colours common to both major computer platforms.

The Challenge of Colour Management on the Internet:

On the Web, graphics such as maps are transmitted mainly in two file formats, GIF and JPEG. Internet browsers, e.g., Mosaic, Netscape, or Internet Explorer, display graphics on computer monitors (PCs or Macs), using the device-dependent RGB colour model. Unfortunately, at this time, Web browsers do not support the CIE or CMYK models. In any case, graphic files based on these models would be too large, requiring more bits of data to describe colour. All colour data of images to be displayed on a computer monitor must be translated into the RGB colour space.

Since the RGB model is device-dependent, the same RGB data will not look the same when displayed on different computer monitors, and/or with different Internet browsers. This occurs because each monitor emits a slightly different shade and intensity of red, green, and blue light. These differences can be due to the age of the monitor and the settings being used. Also, different platforms have somewhat different system colour palettes. We have no control over what monitor, operating system, platform, or browser the Web audience is using, or what the monitor settings are. The challenge is to minimize the effects of monitor inadequacies, platform differences and network access speed, on the display of graphics. Therefore, colour management on the Web must be a compromise. One approach to improve colour consistency and optimize the appearance of cartographic images on the Web, is to limit the selection of colours used in image design. Web page design should be suited to the majority of internet users.

The importance of colour management on the Web cannot be overstated. As one noted researcher, into human colour perception, G. M. Murch, states “Colour can be a powerful tool to improve the usefulness of an information display in a wide variety of areas if colour is used properly. Conversely, the inappropriate use of colour can seriously reduce the functionality of a display system.” The Web continues to grow at a relentless pace and is increasingly successful. For example, the Web is being used as a tool for commerce and there are products, such as maps, that are often purchased because of their well-represented colour. Therefore, it is important that the colour of the product be reproduced on the Web with accuracy. With cartography on the Web, the use of colour plays an important role in the visualization and analysis of data. The correct application of colour for the display of thematic map data, allows for the better observation of interrelationships and patterns. The poor use of colour obscures these patterns. Colour sequences should correspond to the logical ordering in the data being displayed. In conclusion, colour should be used with skill.

Tips for Designing Web Graphics

It is said that on the World Wide Web all computers are colour blind. The Web distributes images to many different types of computers and monitors, an image that looks good on one system may appear completely different on another. The following suggestions may help to minimize cross-platform differences.

1. Before creating Web graphics, check your computer settings. Adjust the brightness and intensity controls on the monitor, and if possible create graphics in an environment with a gamma setting of 2.2.
2. When designing graphics for the Web, use the 216 colour browser-safe palette for colour selection. This will maximize the chances of having Web graphics look the same on different computer platforms and monitors and avoid unwanted dithering in your images. Dithering can reduce the quality and legibility of an image and should be avoided. If the 216 colour palette is not used, then include a note on the Web page that advises users that the images are optimized for 16 or 24-bit Truecolour display monitors.
3. To avoid unexpected problems while designing and creating colour Web graphics be sure your computer’s colour depth is set for either 256 (8-bit), or millions of colours (24-bit) and not thousands of colours (16-bit). In other words, do not save browser-safe colours in 16-bit. For some technical reason, browser-safe colours are not represented by 16-bit colour systems. Graphics created on a 16-bit system when viewed in a 256 colour environment will be dithered.
4. Keep the image file size small to avoid losing your Web audience. The physical size of an image on the screen does not have a lot to do with the download speed. It has more to do with how efficiently the image file has been compressed. Download speed is purely a function of the number of bytes of data that must be transferred from the server to the client’s computer via the telephone system. The access speed of the average Web user through an Internet provider is about 28.8 kilobit per second (KBPS) or 3.6 kilobytes (KB) per second. This means a 50-kb graphic on your Web page could take about 15 seconds to download. Studies show that you risk losing 20% of your Web audience for every 10 seconds of download time.
5. Keep image resolution low, to about 72 PPI. Web browsers display graphics at 72 PPI, consequently, there is no advantage to designing, creating, or scanning a graphic at a higher resolution. You are only increasing the file size.
6. Use the GIF graphic file format for maps, diagrams, and any graphic that contains text. Use JPEG (and its more efficient compression capabilities) for complex graphics and photographic images without text.
7. Use HTML height and width tags with your graphics. This information tells the browser how much page space to allocate for the graphic. This does not speed up the downloading of graphics. However, it does allow the audience to see the basic page layout sooner and start reading while graphics are downloading.
8. Use anti-aliasing. Aliasing is the undesirable effect produced when graphics and type are displayed on a monitor at a low resolution. Straight lines when drawn on a computer screen horizontally, vertically, or at 45 degrees pose no problem, however, at any other angle, lines appear jagged or like stair-steps. This occurs when straight lines or straight edges conflict with the rectangular grid of the computer screen.

[D]
Click for more information, 1 KB
Figure 7. Un-anti-aliased Graphics

[D]
Click for more information, 2 KB
Figure 8. Anti-aliased Graphics

Computer programs such as Adobe Photoshop or Paint Shop Pro can apply anti-aliasing automatically to graphics and type to create the illusion of smoothness. This process adds pixels of an intermediate tone and colour to fill in the steps along the edge or line.

Using Colour Effectively

1. When choosing a colour sequence or legend keep it simple. Limit the number of colours to seven, plus or minus two, because seven seems to be the optimum number for a viewer's short term memory. If there are too many different colours in the graphic, the viewer will not develop an effective mental model of data interrelationships.
2. It is useful to establish meanings for colours in your graphics, by being consistent in your design. If a particular shade of blue represents water areas, then use the same shade of colour for that feature for all map layers.
3. There is a perceptual order to colour that follows the colour spectrum of red, yellow, green, and blue. When viewing these colours, red tends to focus in the foreground, yellow and green focus in the middle, and blue focuses in the background. Consequently, if you really want to emphasize a feature use red. Blue is good for backgrounds.
4. The use of various shades of the same colour to represent totally different subject matter in one map may confuse the viewer. For example, different shades of blue are very difficult to distinguish. These shades may not be recognized as being different, when seen in different locations of the map.
5. There is a language to colour, based on the culture and experience of people. Colours can be very symbolic. This fact should be kept in mind when designing Web graphics. Some obvious examples of this are: the colour red implies importance or danger; yellow refers to caution; in mapping, green often represents vegetation. In North America black is a funeral colour whereas, in India, white is the funeral colour.
6. Colour has physical and emotional effects on the viewer. For example, red is exciting, green restful, and blue is cheerful.
7. Avoid the simultaneous display of highly saturated or pure colours. Using the wrong combination of these colours for backgrounds and foregrounds can create effects that cause eye strain. If several highly saturated or pure colours are used in combination, the human eye must constantly refocus, causing eye fatigue. Yellow causes the greatest fatigue, while blue the least.
8. Avoid using the colour blue for small text, thin lines, and small shapes. The edges of these objects will tend to blur and blend into a white background.
9. The choice of surrounding colours can have significant impact on the perception of an individual colour. A light colour next to a dark one will cause the lighter colour to appear lighter than it actually is, while the darker colour will appear darker.

Colour Palettes and Progressions

The following colour palettes and colour progression tools are not GIF or JPEG images, they are generated by the HTML of their own page, as linked below:

[D]
Click for larger version, 70 KB
The complete 216 colour, browser-safe palette

[D]
Click for larger version, 35 KB
Sample colour progressions

[D]
Click for larger version, 32 KB
The Canada Land Inventory map series colour legends

[D]
Click for larger version, 9 KB
The 16 named colours