Web-safe Colours Content from the guide to life, the universe and everything

Web-safe Colours

7 Conversations

Computer monitor showing multi-coloured squares

When Sir 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 colour. 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 monitor1 works with light, not pigment.

The Range of Colour

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 a subset of colours within the visible range, which the average human eye cannot distinguish at all. These colours are known as the metameric grays. These shades are produced when the balance of red, blue, and green evens out into a colour that the human eye cannot distinguish from grey.

Bit Depth

Windows users have the option to set their displays for 256 colours, 'high colour' (16 bit) or 'true colour' (32 bit). With other operating systems, terms such as 'thousands of colours' or 'millions of colours' may be used. What's being described here is how many bits 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 will load faster than one which requires 24 bits. It can be argued that the development of faster computers has been driven by the need for faster screen imagery.

Building Colours

Pure (unfiltered) light is white. You cannot get lighter 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. They may also be described by three qualities: hue, saturation, and value (HSV)2. To the human eye, a colour at its maximum value is a colour 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 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 with saturation as with value. In fact, as you lose saturation you mix in more 'light'.

Colours are identified as three pairs of hexadecimal digits, one pair for red, green and blue respectively; each colour has a unique numeric value, but the pairs of digits can be considered (and altered) separately as components of the overall colour.

Spectrum colour is quantifiable and can be studied by people who are colour-blind... like Sir Isaac Newton. Colour is also very subjective. A handful of colours have names that have been generally agreed upon; 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 International Colour 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 colour management system architecture and components

Among the founding members of ICC 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 about making sure that pigments match digital design processes.

The Web Safe Palette

Much of the credit has been given to Netscape for the development of a common subset of foreground colours, which can be used on PC's and Apple machines, although colours vary dramatically from monitor to monitor, as a visit to a bank of televisions will demonstrate. But when colours can be depended on to display (more or less) as intended, designers can create web sites with confidence in the consistency of the end result.

The web safe (also called browser safe) palette consists of 216 colours3, each represented numerically. A web safe 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 which follows the same rules, but uses 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 grey, an unexpected colour, or it may attempt to simulate the colour by means of dithering.4

The Basics

  • 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.

  • Black - Black is the complete absence of light and is represented as #000000.

  • Gray - Where red, green, and blue occur in equal amounts, the result is a perfectly neutral shade. The grays can be thought of as darker whites ... or as lighter blacks.

Primary Colours

In each of the primary 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.

  • Red is FF0000
  • Green is 00FF00
  • Blue is 0000FF

Secondary Colours

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

  • Cyan is 00FFF, a combination of blue and green.
  • Magenta is FF00FF, a combination of red and blue.
  • Yellow is FFFF00, a combination of Red and Green.

Figuring out the Combinations

Figuring out the combinations of RBG in order to produce the colour you want is pretty simple, once you've learned the basic seven and once you understand value and saturation. If 0000FF is pure blue and 00FFFF is pure cyan, then 0033FF, 0066FF, and 0099FF are the web safe shades of blue in between.

How would I get from green (00FF00) to magenta (FF00FF)? This is an interesting trip, because the two colours actually cancel each other out halfway! Since the web safe set is only a subset, we jump over the shade that is exactly halfway between and come up with two silvery shades of purple and green respectively.

1For the purposes of this entry, flat LCD monitors will be understood to handle colour the same way as raster based monitors.2As with so much else in the subjective world of colour theory, the Hue-Saturation-Value descriptor is also popularly called Hue, Luminance and Saturation (HLS).3According to Macromedia Inc, four of these colours are not rendered correctly by Windows Internet Explorer: #0033FF, #3300FF, #00FF33, and #33FF00.4Seurat dithered! Dithering applies two colours in a pattern of dots to replicate a third colour.

Bookmark on your Personal Space


Edited Entry

A315901

Infinite Improbability Drive

Infinite Improbability Drive

Read a random Edited Entry

Categorised In:


References

h2g2 Entries

Write an Entry

"The Hitchhiker's Guide to the Galaxy is a wholly remarkable book. It has been compiled and recompiled many times and under many different editorships. It contains contributions from countless numbers of travellers and researchers."

Write an entry
Read more