Introductory Note

This article is primarily intended to help researchers add colours to their text, and gives extensive examples of colour ranges with their matching values. It presupposes an understanding of the terms bit and byte, and at least glancing acquaintance with the concept of the hexadecimal radix.

The Colour Spectrum

When Isaac Newton first bent light through a prism and generated a rainbow in 1666¹, he demonstrated the existence of the colour spectrum, composed of six primary colours that we all know from our childhood crayon boxes: red, orange, yellow, green, blue, and violet. Up to then, colour was understood and manipulated solely as a quality of pigment, the element in paint and dyes that gives them their color. But as a result of Newton's discovery, science learned to talk about two kinds of colour: pigment colour and light colour. This article is about light colour, that is, colour derived from the play of light. The Cathode ray tube at the heart of the conventional computer display monitor² works with light, not pigment.

How many colours are there? There are certainly more than the human eye can see. The range of visible colours ends above infrared and below ultraviolet, but the remaining subset is continuous and infinitely divisible. In a range of very similar colours, called a gradient, the eye is quick to discern what digital artists call banding (a visible difference between adjacent shades); this demonstrates that the human eye is capable of exceedingly fine discrimination. And yet there is an intriguing subset of colours within the visible range which the average human eye cannot distinguish at all. They are known as the metameric grays. These shades come about when the balance of red, blue and green somehow evens out into a color the human eye cannot distinguish from gray. If our eyes were more keenly developed, we might be able to see these grays as colors, and distinguish one from another.

A (Quick) Note About Bit Depth

Windows Users have the option to set their displays for 256 colours, "high colour (16 bit)" or "true colour (32 bit)" This may, in some applications, also be listed as 256 colours, "thousands of colours", or "millions of colours." What's being described here is how many bits/bytes it takes to specify the colour of each pixel in an image.

The decimal value 255 is #FF in hexadecimal (hex) representation. This (plus 1 for 0, or black) is the maximum value that can be held in 8 bits. Similarly, #FFFF, or 66535 decimal (plus 1 for black), is the maximum value that can be held in 16 bits (2 bytes), and #FFFFFFF (16,777,215) is the maximum (plus 1) for 24 bits (3 bytes). Thus "bit-depth" determines how many colours are available for display

Obviously, an image that only requires 8 bits to describe a screen pixel is going to load faster than one which requires 24 bits. It can be argued that the development of bigger and faster computers has been driven by the need for bigger and faster screen imagery.

Building Colours

Pure (unfiltered) light is white light. You cannot get lighter or brighter than white. Conversely, pure black is the complete absence of light. All colours in between white and black are recipes, combinations of the three primary colours, Red, Green and Blue. Describing a colour in terms of its red, green and blue components is called RGB modelling, but this is not the only way to describe colours derived from light. They may also be described by three qualities: Hue, Saturation and Value³, called the HSV model for short. In this article, we will be identifying colours as three pairs of hexadecimal digits, one pair for red, green and blue respectively. Each colour therefore has a unique numeric value, but the pairs of digits can be considered (and altered) separately as components of the overall colour. While this puts us pretty firmly in the camp of the RGB model, it's quite possible to also describe the saturation and value/luminance of the colour ... or of the colour's red green and blue components.

If this begins to seem confusing, it's because the world of colour theory is itself confusing. Spectrum colour is quantifiable and therefore can be studied even by colour-blind people like Isaac Newton himself. At the same time, it is very subjective. A handful of colours have pretty well agreed-upon names; thousands more have names which are obscure to anyone but a specialist. And innumerable others exist but have never been formally named.

One group which is making a very serious effort to standardise "digital" colour is the ICC (International Color Consortium), which was founded in 1993 "by eight industry vendors for the purpose of creating, promoting and encouraging the standardization and evolution of an open, vendor-neutral, cross-platform color management system architecture and components."⁴ Among the founding members are Adobe Systems, Microsoft, Apple, Eastman Kodak, Silicon Graphics and Sun Microsystems.

Pantone is another major player in the world of colour-matching systems, although their palettes are geared toward pigment-based systems (dyeing, printing, plastics). They are, in any case, members in good standing of the ICC, because they are concerned to make sure that pigments match digital design processes.

The Web-Safe Palette

Credit appears to be generally given to Netscape for the development and spread of an agreed-upon subset of foreground colours which can be used on PC's (Windows OS's) and Apple machines. The idea of the web-safe palette is to have a range of colours which will display accurately whether the machine is a high-end muscle MacIntosh or a Windows basic freebie PC. Accuracy is perhaps a perilous term to use: a colour may vary dramatically from monitor to monitor, as any visit to a bank of televisions will demonstrate. But when colours can be depended on to display (more or less) as intended, then designers can create web sites with good faith in the quality of the end result.

The web-safe (also called browser-safe) palette consists of 216 colours⁵, each represented numerically as described above. A websafe colour may consist of any of the following values, in any combination of 3 pairs: 00, 33, 66, 99, CC, and FF.

UNIX users rely on a palette with the same rules, but using numeric values composed of #00, #40, #80, #BF or #FF.

What if you use a colour outside the palette, say #AC27F0? The answer is that results are unpredictable. A machine using a limited palette may display a gray, an unexpected colour, or it may attempt to simulate the color by means of dithering.⁶

Black, White and Gray

This text is coloured FFFFFF, or pure white. The hex value FFFFFF is the highest number that will fit into the allotted space (three bytes, one each to represent red, green and blue).

This is big black text! Conversely, black is the complete absence of light and is represented as #000000.

Where Red, Green and Blue occur in equal amounts, the result is a perfectly neutral shade, as shown in the list here. The grays can be thought of as darker whites ... or as lighter blacks. Only the brighter grays are shown here.

The Basic Seven

Primary Colours

Notice how in each of these colours, one pair of digits is at maximum value, while the other two pairs are at zero. This indicates that one component is at its brightest, while the other two components are completely absent. Thus, these colours are primary.

Secondary Colours

These are also known as additive colours because they are derived by adding two primary colours together.

We have now finished showing some of the colours that have names, for web-safe purposes. To be sure, many hundreds of colours have names, but these others may vary according to which system is referenced, such as Pantone or ICC.⁷

Value

To the human eye, a color at its maximum value is a color with no "dark" in it. Reducing the hex value of a colour is the equivalent of turning down the wattage of the light. The more you reduce the value, the darker the colour gets.

Saturation

Saturation defines the amount of white that is mixed into a colour. A fully saturated colour is one with no white in it. We have the same metaphorical problem as with value. In fact, as you lose saturation you mix in more "light".

Combinations of RBG and How to Figure Them Out

It's pretty simple, once you've memorized the basic seven and once you understand value and saturation. If 0000FF is "pure" blue and 00FFFF is "pure" cyan, then 0033FF, 0066FF, 0099FF and 00CCFF are the websafe shades of blue in between.

Similarly, the shades between FF0000 (red) and FFFF00 (yellow) are FF3300, FF6600, FF9900, and FFCC00.

And the shades between 0000FF (blue) and FF00FF (magenta) are 3300FFF, 6600FF, 9900FF and CC00FF, a nice suite of purples.

How would I get from green (00FF00) to magenta (FF00FF)? This is an interesting trip, because, on the way from here to there the two colors actually cancel each other out halfway! Watch:

Since the websafe set is only a subset, we jumped over the shade that was exactly halfway between (#777777) and came up with two silvery shades of purple and green respectively.

Useful and Miscellaneous Colors

Finally, here are some colours composed of varying combinations of red, green and blue.

This colour, FFCC99, is a caucasian flesh tone. It has a very high value in all 3 basic hues, but is lowest in blue, which makes it lean toward yellow (FFFF00).

This shade, 669900, is a decent olive green Now that you can read the numbers, you can see that this is a darkish green with a strong splash of red, which has given the brownish tinge. Now if you increase the value, this color will become more and more yellow, as it heads toward the number FFFF00.

Syntax for Text Colour

To make this statement effective, replace square brackets with angle brackets:

[FONT COLOR="#FFFF00"]Text to be coloured goes here[/FONT]

The FONT command has been superceded in HTML by the use of style sheets⁸, but within the context of GuideML where the background and surroundings are pre-set, it is the best solution for spot results.