Web-Safe Colors

Most computer displays are capable of showing millions of distinct colors. It hasn't always been that way. Some older computers/monitors were capable of showing only 256 distinct colors.

In the days of 256 color display technology, it was important for web designers to limit the number of colors used on a web page. If they didn't, the computer would attempt to approximate the colors it wasn't able to display by blending two other similar colors in a pattern of dots. This color approximation technique is called dithering and it made carefully drawn images look like crap.

Netscape was the market leader in the browser wars at that time. They took it upon themselves to develop a standard palette of colors that all computer monitors were capable of displaying. This palette was known as the Netscape palette, or the Web Safe palette.

There are 216 colors in the Web Safe palette. This is less than 256, the maximum number of possible colors that could be displayed. The unused color slots in the palette were used by the operating system (ie Windows^TM) for things like the desktop and title bars on windows. But this is not why Netscape's palette contained only 216 colors. This figure was mathematically convenient. By the way, mathematic convenience has more to do with which colors make up the palette than do aesthetics, as anyone with an eye for color will attest to.

To understand the mathematic convenience of the 216 color palette, and to understand how HTML colors are coded, it is necessary to understand a numbering system called Hexadecimal.

Hexadecimal Numbers

Like all things computer related, HTML colors are coded using numbering systems that are convenient for a computer and confusing for most humans. The hexadecimal numbering system is one such example.

Most humans are familiar with the decimal numbering system; a system that uses 10 (deci) digits. Those digits are 0 through 9. By combining these ten numerals into sequences of multiple digits, large values can be expressed easily. Humans find this numbering system intuitive and convenient, probably because we have ten fingers. Had we as a species been born with 12 fingers, we would have probably adopted a 12-digit numbering system.

Computers find the decimal numbering system inconvenient for reasons that I won't go into here. As far as I know, computers do not have 16 fingers, but a numbering system with 16 digits is very natural for computers.

The 16 digit numbering system commonly used by computers is known as hexadecimal. It has the same ten digits as the decimal system, plus 6 other symbols. To keep things familiar for us humans, the extra six symbols happen to be the first six letters of the alphabet, A through F.

Hexadecimal numbers are often prefixed with a pound sign (#) or a zero and a lower case x (0x). Here are some examples of Hexadecimal numbers so you get an idea of what they look like:

0xD2, 0x3F8, 0x64A9FB35, #FFCC99, 0x3954, etc.

The prefix is useful for distinguishing Hexadecimal numbers from ordinary Decimal numbers. You can usually differentiate hex numbers from decimal numbers by the presence of alphabetic characters, but many hex values use numeric digits only, making it impossible to tell hex from decimal. The last sample above would be indistinguishable without the prefix.

RGB Color Codes

The colors you see on a computer monitor are created by combining only three different colors of light in varying proportions. The three basic colors are Red, Green and Blue, abbreviated R, G, and B.

A web page designer can directly control the amount, or intensity, of each of these three basic colors that will be combined by the monitor to display any color at any point on the screen. If all three colors are set to full intensity at the same point on the screen, a white dot will appear at that location. If all three colors are set to zero intensity, a black dot will appear. By adjusting the intensity of the three colors in different proportions, every color in the spectrum can be displayed. For instance, full intensity red + full intensity green + zero intensity blue = yellow. Full intensity red + half intensity green + zero intensity blue = orange.

Full Red	Yellow		Full Red	Orange		Half Red	Purple
Full Green			Half Green			Zero Green
Zero Blue			Zero Blue			Full Blue

In these examples, the intensity of each color component has been expressed with words like Full, Half or Zero. The computer prefers to use numbers instead. For convenience (from the computer's perspective), these intensity numbers are two-digit hexadecimal numbers.

A two digit hexadecimal number can represent 256 unique values (ranging from 00 through FF). This means that each color component can be set to any one of 256 distinct intensities. 256 intensity levels for red, multiplied by 256 intensity levels for green, times 256 intensity levels for blue makes 16,777,216 possible colors. With this degree of control, slight differences in intensity of red, green or blue are imperceptable in most cases.

Here is an example where the intensity of red and blue remain constant (both are set to 00), but the green channel is varied by 48 distinct steps across the sample (green ranges from 0x60 on the left to 0x8F on the right).

Clearly, the right end is lighter than the left end, but it is not likely that you can see the distinct steps in between. The entire sample seems to blend smoothly from left to right. If you set your monitor to display only 256 colors, you will either see two or three distinct ranges of green, or the monitor will attempt to dither the "in between" colors.

With 16,777,216 colors to play with, you can create stunning images. But when you try to display your polychromatic works of art on older monitors, the display hardware will totally ruin the spectacular effects you have created when it estimates or dithers the colors it cannot display accurately.

The Web Safe Palette

To keep web images from falling prey to the display ditherer, Netscape created the Web Safe palette. This palette is a set of only 216 colors from the array of 16,777,216 possible colors. As long as web designers and graphic artists limited their use of color to these 216 web safe colors, the images they produced could be faithfully reproduced on any monitor.

So who decided which 216 colors to use? And why 216 and not 200 (or 256 since computers seem to like this number so much)?

If this decision had been left to a graphic artists, there would probably have been a logical number of colors in the palette, like 200, or 250. Or maybe there would have been some number of colors that happened to suit the mood of the artist at that time. We'll never know. Netscape didn't employ a graphic artists for this task. Instead, they took a mathematical approach.

It is my belief that the palette was decided upon thusly.

Anyone would agree that it was important to select as broad a range of shades and hues as possible without exceeding the magical number 256. Furthermore, it made sense to give each color component equal representation in the final palette. Red is no more important than blue or green, for instance. This is where the mathematics comes in. With these criteria in mind, the problem boiled down to determining the largest integer whose cube is less than or equal to 256. In English, this means "What number, when multiplied by itself three times, does not exceed 256?" The magic number that satisfies these criteria is 6:

So it was decided that the palette would consist of 216 colors, evenly distributed through the spectrum. The colors in the palette would represent every possible combination of 6 distinct intensity levels of red, green and blue. The only thing left to determine was which 6 intensity values out of 256 possible values should be used for each color component. It turns out there is a very elegant mathematical solution to this puzzle.

In decimal, dividing the range of 0 through 255 into six equal ranges yields the following set of values: 0, 51, 102, 153, 204 and 255. Both ends of the range (0 and 255) are represented so pure colors like full red, zero green, zero blue can be included in the palette. The difference between consecutive intensity values is subtle enough to be useable. By combining red, green and blue in every possible combination of these 6 values, a useable palette had been defined.

But the elegance of this palette is not immediately obvious. Everyone agreed that it was important to use these 216 colors, but the numbers used to represent them were anything but intuitive or easy to remember. That is until they are converted into their hexadecimal equivalents.

Cumbersome Decimal		Hexadecimal Equivalent
0		00
51		33
102		66
153		99
204		CC
255		FF

The decimal numbers such as 51 and 153 translate into considerably easier to remember hexadecimal values such as 33 and 99.

With numbers as easy to remember as this, specifying web-safe colors is a breeze! Every web safe color is simply a combination of three values from the set: 00, 33, 66, 99, CC and FF.

To specify any web safe color, pick one of these values to represent each of the three color components, Red, Green and Blue, and stick them all together into a six digit hexadecimal number. By using only 00, 33, 66, 99, CC or FF for each of the color components, you are guaranteed to be web safe.

Try mixing your own web-safe colors...

... or use the Web Safe Color Picker.