Have you ever been surfing along and noticed that some images look pretty distorted and full of speckles? If so, then you have discovered the CLUT.

Most computers can run in one of 3 (maybe more) colour modes:

1. 256 colour

2. high colour (64,000 colours)

3. and true colour (16.7 million colours)

If you are in true colour mode your computer is configured to display up to 16.7 million distinct colours. That gives you a couple million shades of red alone. It's kind of nice because feathered edges look feathered, photographs look fantastic and nice backgrounds actually look nice!

There is a price to pay however. Your poor computer has to work extra hard trying to display everything. Consequently things tend to work a little slower and often a little jerkier. On the upside through, images look very good.

If you want to give your processor a bit of a break, you can set your computer to display 64,000 colours rather than 16.7 million. This is the high colour mode. Although there is a huge difference between 16.7 million and 64,000 to your computer, the difference is hardly noticeable to your average run-of-the-mill human. You get nice looking images, nicely feathered edges and there's not much in the way of jerkiness or slowness in your display.

Now if your like me, and super high image quality takes a back seat to speed, and you want your display to take up as little resources as possible, or if you have an older computer, you will stumble along in 256 colour mode. All this means is your computer says "Listen, I know that there are 16.7 million colours. But what I'm going to do is only use 256 at a time. If I have to display an image that technically has 80,000 colours in it, I'm just going to try and find the closest 256 colours and just use them. Deal with it."

Now let's take that one step further. Let's suppose your computer is in 256 colour mode and you're running the Netscape browser. Netscape says, "I am taking over your colours. Since you only have 256 colours to play with, I am assigning a permanent value to 216 of them. The remaining 40 can be used any way you want." The end result is Netscape dithers all images to those 216 colours.

Why does it do this?? Let's suppose you have a web page with two pictures on it. One picture contains 150 distinct colours. The second picture contains another 150 distinct colours. If you display them together then all of a sudden your computer has to deal with 300 separate colours, not to mention the colours for your taskbar and buttons, etc. This throws a serious curve into the 256 colour idea. So what Netscape does is say "Here are the 216 colours we will use for ALL images. Everything gets dithered to these colours."

Netscape's 216 colours

This group of colours is called a CLUT. All browsers have one. However not all browsers use the exact same colours in their clut nor do all colours and cluts work the same on operating systems other than Windows. 

If both of the above images look about the same, then you are running a 256 colour display and Netscape is dithering the image on the left to it's 216 colours. If the image on the left looks smooth but the image on the right looks all speckled, then you are running a high or true colour display. The image on the left is a few simple gradients, saved in a low compression jpg format. In true colour mode the gradient is very smooth and in high colour mode it is still quite smooth (although the number of distinct colours falls to 313). The image on the right is a screen capture of the left image through 256 colour mode.

I know its tempting to say phooey on anyone using only 256 colours, but keep in mind that there are still a lot of people who do just that. If your image is a photograph in jpg format there's not too much you can do. Photographs are simply going to look a little worse to those running 256 colours.

Once again, if the images look about the same then you are in 256 colour mode. If the image on the left looks significantly better than the image on the right then you are in high or true colour mode. If this is the case then the image on the right is how people running 256 colours will see your picture. But, like I said, with photographs, there's not much you can do.

It's a very similar situation using gif images. Even though a gif image can only contain 256 colours, if they are not Netscape's colours, the image will get dithered...

...except when you view a single image through the browser. By that I mean not an image in a web page, but viewing the image directly. As an exercise, right click on the image Ball 1 and choose View Image. What you will then see is the browser displaying the image directly and not by way of a web page. Since the browser knows that no other image will be coming down the pike, it will relax it's 216 colour rule and allow your computer to display whatever 256 colours it wants to.

One area where we can make a difference, is in drawings. Anything that doesn't contain a lot of gradients. Below are a couple of good examples.

We have Image 1 and Image 2 just like the ones before. (the only exception is if you have Options/General Preferences/Images/Substitute Colours checked, in which case some drawn images will look nicer but other images may look worse. Go figure.). But now we have this third image. The third one should look just fine to everyone. It is nice and smooth even at 256 colours.

I did this by using a Netscape pallet in my graphics editor. You can do this too. If you load this image...

...into most any graphics editor you can make a colour pallet from it. (Consult your graphic editor's instructions if you don't know how to do this). Then you're ready to go! You can import an existing picture and substitute the closest Netscape colour for all the colours in the image. As you can see from the images above, the results are well worth the two minutes (at most) it takes to do this. If you are starting a new image, you can start with the Netscape colours. If your major areas are already done in Netscape's colours, and if you switch to 16.7 million colours for some further editing, when you go to substitute Netscape's colours back in, your image will look pretty much the way you intended. Plus it will look that way to everyone.

If you want to delve a little further into Netscape's browser clut, here's how they came up with the 216 colours. In our everyday life we use a base 10 number system. We use the following numbers...

0-1-2-3-4-5-6-7-8-9

Somewhere along the line, computer people decided that certain things would be easier to do if they used a base 16 number system...

0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F

Since we don't have a unique symbol for 10, 11, 12 etc, we use letters to represent those values. Below are both number systems counting to our 50...

 

0	1	2	3	4	5	6	7	8	9	10
0	1	2	3	4	5	6	7	8	9	A

 

11	12	13	14	15	16	17	18	19	20
B	C	D	E	F	10	11	12	13	14

 

21	22	23	24	25	26	27	28	29	30
15	16	17	18	19	1A	1B	1C	1D	1E

 

31	32	33	34	35	36	37	38	39	40
1F	20	21	22	23	24	25	26	27	28

 

41	42	43	44	45	46	47	48	49	50
29	2A	2B	2C	2D	2E	2F	30	31	32

So when someone talks about a "hex code" or "hexadecimal number" or if you see cryptic colour codes like 09EC0A, CCFFCC, 00AACC, etc., this is what they're talking about and where it comes from. Taking it a little further, your computer understands colours in terms of red, green and blue values.

RED - GREEN - BLUE

or

R-G-B

Each of those can have a value from 0 to 255. 0 being the absence of colour, 255 being full colour. Using that scale, we get the following values...

Since we have 3 colours, each with a value that can range from 0 to 255 we have 16,777,216 possible colour combinations (256 ³). So, that's how we get 16.7 million colours.

If we replace the decimal number with it's hexadecimal equivalent we start to get something that looks a little more like those "hex codes".

If we then use 00 for 0, and 01 for 1, etc., and if we get rid of the dashes(-), we then got ourselves some genuine colour codes!

Now, how did Netscape go about choosing which colours to use? Rather than using 256 values for each of the three colours, they only use 6. Namely 0, 51, 102, 153, 204 and 255. If we translate those numbers into their hexadecimal equivalent we get 00, 33, 66, 99, CC and FF. Since that is six different values for each of 3 colours, there are 216 possible colour combinations (6 ³).

One last item. If a person is running a 256 colour display and you have chosen a background colour that is something other than one of Netscape's 216, then there is a very good chance that Netscape will instead pick the closest match from it's own colours. Sometimes this is not a good thing. I have seen pages where this left the text almost unreadable. Once again, I know it may be tempting to say 'too bad' to those of us in 256 colour land. But...as I said before, there are a lot of us. And if your goal is to design smart looking web pages, then you might want to consider spending the extra couple minutes to fine tune your graphics so you look good to everyone.

The HTML 4.x specifications defines sixteen colour names that can be used instead of colour values in HTML. These colours are valid values for attributes such as BGCOLOR or LINK on the BODY element. The CSS2 specification also uses these colours as colour values which can be used with properties such as color, background-color or border-color.