Colour in HTML

Have you ever created or scanned a great graphic to put on an HTML page, only to find out that it doesn't look nearly as good when you look at it using Netscape as a browser...because of a lot of dithering? Or, you tried using a Netscape background color, only to find that it had a lot of little spots (a dither pattern) on it?

Netscape uses a theoretical color scheme in which each primary color (  red  green  blue ) is represented by a number from 00 to FF in hexadecimal (0 to 255 in decimal notation).

In this scheme there are a total of 256 x 256 x 256 = 16,777,216 colors.

This is the same color scheme used by 24-bit color graphics systems. Each of the three primaries is represented by an 8-bit value which can range from 0 to 255. That requires 24 bits because 8 x 3 = 24. ible 16,777,216 colors.

Netscape users generally only have 8-bit (or less) color graphics adapters (this is changing of course, but slowly) Where each of red, green, and blue can take on only 8 dictinct values. The total number of colors that an 8-bit graphics adapter can show is only 256 (because an 8-bit binary number can only take on 256 distinct values).

On these types of systems, Netscape actually uses 256 colors. Except for 8-bit PC SVGA monitors, where Netscape uses 216 colors .

Netscape shows other colors by "dithering" a method which mixes some pixels of one color with some pixels of another color. If you stand far enough away from your monitor, a dithered color can look almost as good as the real color it represents. But at the 72 pixels/inch or so, at a distance of a foot (.3 meters) or less from the monitor, where most of us view it from, you will usually see the individual, differently-colored pixels.

[Before you ask, no, Netscape doesn't have 16,777,000 different dithering schemes to make up all those other colors. It uses far fewer, but in most cases, gets "close enough" to the actual color. If you want really sharp, clear colors to show up on Netscape, you need to limit your design (or modify the color map of your image) to use, as much as possible, the 256 actual colors that Netscape will display without dithering on most computers/monitors. 

How the numbers work:

As you can see from the chart above, Netscape displays without dithering the colors represented by red, green, and blue, where each of those takes on any of the following values:

    hexadecimal    decimal

    00               0
    33              51
    66             102
    99             153
    CC             204
    FF             255

You may have noticed that those numbers account for 6 x 6 x 6 = 216 colors

Where are the missing 40 hexadecimal numbers?

Netscape allows pure Reds, Greens, Blues, and Greys to take on a few additional colors. Here is a complete list of those: 

                Greys   Reds    Greens  Blues

        Black   #000000
                #111111 #110000 #001100 #000011
                #222222 #220000 #002200 #000022
                #333333 #330000 #003300 #000033
                #444444 #440000 #004400 #000044
                #555555 #550000 #005500 #000055
                ....    ....    ....    ....
                #EEEEEE #EE0000 #00EE00 #0000EE

For reference, here are the additive primary colors 

 #FF0000    (255,  0,  0)    Red
 #00FF00    (  0,255,  0)    Green
 #0000FF    (  0,  0,255)    Blue

 #00FFFF    (  0,255,255)    Cyan
 #FF00FF    (255,  0,255)    Magenta
 #FFFF00    (255,255,  0)    Yellow

 #000000    (  0,  0,  0)    Black
 #FFFFFF    (255,255,255)    White

Some designers never use highly-saturated primary colors and their compliments in their images, except for rare, special effects. They're considered to be too strong radiating from a monitor. Better choices are typically one or two steps darker. For example, try #00CC00 (0,204,0) or #009900 (0,153,0) for a slightly darker, less startling, but still pure green.

The 256, 216 non dithering colors shared by browsers:

Are those ALL the non-dithering colors?

No, though it might occasionally seem like that. Netscape does a "nearby" (or if you like, "fuzzy") match. So you can give it numbers that are not exactly the ones I mentioned, and you will get the nearest non-dithering color. But not a different one. It will just pick the nearest that is closest. If your numbers are too different, however, it will dither.

Are 256 and 216 the only colour models to consider in html?

No. Some UNIX versions use a different, 5x5x5 color cube with only 125 colors. The magic numbers in hex are 00,40,80,bf, and ff notably different from the usual Netscape color cube. The UNIX systems which use this unusual Netscape color model are now becomming rare.

What about Netscape's latest browsers?

Beginning with version 2.0 of Netscape's Navigator (and Gold) browsers, there is a new "Automatic" scheme, which is the default. Under some circumstances Navigator will attempt to match (nearest) colors rather than dither. Netscape has not yet (as far as I know) made the details of that algorithm public, and it's difficult to tell when it matches vs. when it dithers. However, the effect certainly is more noticeable with backgrounds and with images displayed alone (rather than part of an HTML page along with other images and text, where Navigator seems to show a strong preference for matching. Background GIF images seem to show far less dithering in Navigator 2.0 & 3.0 than in the now rarely used 1.0 (JPEG images seem unaffected, they still tend to be highly dithered). Navigator 4.01 dithers a great deal more than any of the other versions in my experience. 4.7 and 6.0 are better again!

Do colours dither when used in text?

Yes, you will notice text colors dithering if you look closely. All versions of Netscape Navigator appear to use some of the 40 "forbidden" Windows colors non-dithered for text, though it may simply be doing a closest match and one can't tell the difference. Safari 4.0, Sunrise etc render coloured text "clean"

Further links

Great Colour shemes using Websave colours

Excellent site eploring the theme of colour and the web