Web.Colours

Web.Colours

The Colour Cube
You may be wondering why all the sample colours on the previous page were made up of only 0s, 3s, 6s, 9s, Cs, & Fs. The answer is simple: not everyone surfs the web with 24-bit True Colour; in fact, a large part of the web-surfing public have only 8-bit colour displays. While colours can be specified as triplets of RGB values (each one with 256 possible values, giving a total of more than 16 million possible colours), those of us without 24-bit displays are left with the somewhat tricky decision as to which 256 colours to display.
     Netscape's solution was to decide on a fairly balanced set of colours, and use them all the time. This way, web designers could at least try to stay within the confines of these colours and get predictable results on both 24-bit, and 8-bit systems. What they came up with has come to be known as the Colour Cube.
     The colour cube is made up of all colours whose RGB values are either 00, 33, 66, 99, CC, or FF. If you do the math you'll see that there are 216 unique colours in the cube. By only filling 216 of the 256 maximum colours, some room is left for custom colours that don't fit very well.
     So was this a good idea? That's a matter of opinion. The other way it could have been handled would have been to get Netscape to custom-choose a new 256 colours for each page it loads. While this would give designers more freedom and control over their pages, it certainly has a downside; reducing 16 million possible colours to 256 takes time. If Netscape had to do the math each time, it would seriously hurt performance. Just think about it: it would have to tally how many times each of the 16 million colours were used, find the 256 most popular ones, and then dither all the remaining colours. And you thought loading images was slow!

the Netscape Colour Cube
Why You Should Care
"Well," you may be saying to yourself, "This is all very interesting and everything, but what does it have to do with me?" If you're a web designer, it means a lot. You may have been going your merry way making web pages, all the while ignorant of how ugly they look to a lot of web surfers. And while a web designer certainly can get away with ignoring that part of the web population who have 8-bit displays, a good designer, doesn't.
     The problem is that when you use colours on a webpage that don't fit within the colour cube, Netscape is forced to dither those colours, making the page look bad, and slowing down the display.
     What makes it even more frustrating for the 8-bit surfer is that it is really easy for a designer to take this into account, and make pages that look just as good on 8-bit displays as they do on 24-bit ones. What does it involve?
     A bit of time, and a bit of practice. For starters, use background, text and link colours that are part of the colour cube. You can also keep these colours in mind when you're in Photoshop creating the images for your site. Graphics that use non-colour cube colours suffer the most, and appear grainy and ugly, due to the dithering Netscape has to perform, and if you rely mostly on GIFs it's really easy to hand-touch the colour pallette.

Dithering Colours
Okay, so I've mentioned dithering a few times now, and some of you are probably wondering just what the heck dithering is! Dithering is a process by which colours that cannot be displayed exactly as they should be, are transformed so that they appear as close to the right colour as possible. How, you ask? Simple.
     First of all, the colour from the cube that most closely matches the colour to be displayed is drawn. Then, it is shaded by applying uniform pixels of another colour onto it, until a colour that ressembles the desired colour is created. You can think of it as mixing two different colours of paint to get a colour you didn't have before. Now try and imagine a computer mixing paint, and you'll begin to see why dithering is not always such a good thing.
     The reason dithered colours so often look bad is that the computer isn't very smart. When it encounters a colour that is very close to a colour cube colour, it doesn't just round off to the colour cube, it still tries to blend another colour into it. The thing is, if a colour only needs a tiny adjustment, the algorithm just splashes a few extra coloured pixels on top, and calls it a day. What you end up with is an image with polka-dots, and the colours don't look at all like their supposed to.
     Since a web-designer has no control over how Netscape dithers their images, the only way to precisely control an image's appearance is to use colours from the colour cube, so that Netscape doesn't have to dither it at all.

References
Some of the content here was derived from the book Creating Killer Websites by David Siegel. Visit either of these sites for a cornucopia of tips and tricks that every web designer should have at their disposal.
     Instructions on using the Colour Cube.
     Hand retouching a colour palette.
     Netscape Communications Corporation.
     One definition of dithering.
     How Dithering Works. (by Kodak)
     Halftoning explained. (a cs lab)