In Design School, They Promised No Math

A Web color primer

By Bob Schmitt
November 28, 1997

One of the most perplexing aspects of designing Web pages is dealing with color palette problems across multiple platforms. Unfortunately for Web designers, there are a great number of 8-bit color systems still in use today. And although the numbers are shifting toward systems with more color capabilities, it always seems to be your client that has one of those older 8-bit systems and is calling to ask why that beautiful shade of blue you picked for the background looks like a garish green on his monitor.

While color palettes may be old hat to some, there are a lot of designers new to the Web (and many who have been working on the Web for a while) who don't fully understand how palettes work. And, as 8-bit color remains the lowest common denominator in which we need to design for, I decided to pull out and update my standard primer for color palattes and how they work.

Hundreds and Millions of Colors

A true color graphic (such as a JPEG image) that takes advantage of the full gamut of RGB colors is referred to as a 24-bit color image — each pixel of the image can be one of any of a possible 16,777,216 colors (2 bits to the 24th power or 2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2x2).

The problem with 8-bit systems is that they can only display 256 colors on the screen at any one time. Worse yet, the colors are predefined by the system they are displayed on. Any color not in the predefined palette forces the system to either dither two or more colors to create an approximation of the color specified, or shift to a color in the predefined palette — which may be an altogether different color (such as in the case described above). This color shift may actually be more desirable than dithering, since dithering can make it very difficult, sometimes impossible, to read text on a page.

Of course, an 8-bit or less graphic (such as a GIF image) can have its own custom palette attached. This color palette is an index of all the colors in the image and their RGB values — which is why they are commonly referred to as indexed color images. Unfortunately, this palette will also be forced into whatever palette is currently being employed by the displaying application or system.

Some applications in 8-bit mode (Photoshop, for example) will use the image's palette to display the graphic to the detriment of everything else on the screen. To further complicate things, if there are multiple graphics being displayed simultaneously, the application has to decide which palette to use (usually the first image loaded) and force all other graphics into that palette, which can be very messy.

Imagine if the first image loaded is a forest scene with a palette full of greens and any subsequent image (such as a portrait of a person) were forced into that greenish palette. Unless you're creating a page about the Roswell Incident, you could be in trouble.

So, the challenge facing Web designers in creating graphics and using HTML color attributes — such as BGCOLOR — is choosing colors that look good, and are readable, across all platforms.

Mac and Windows Palette Differences

There is a major difference in the way Macintosh and Windows systems deal with color. All Macintosh applications running in 8-bit color mode use a common Macintosh System color palette (seen below). Windows is a little more varied in that each application running in 8-bit color mode will have its own 256-color palette.

The figure below shows an example of the 8-bit Windows System palette from a popular Windows multimedia authoring program. As you can see by comparing it to the Macintosh System palette, there are very few common colors. So the question for Web designers becomes, "Which palette do I design with?"

The Browser-Safe Palette

The granddaddy of all Web browsers is, of course, Mosaic which was developed by the National Center for Supercomputing Applications (NCSA) at the University of Illinois at Urbana-Champaign. The developers of the original Mosaic browser did designers everywhere a favor (some may call it a curse) by defining an 8-bit Windows palette, that coincidentally jibes quite nicely with the Macintosh System palette. This browser-safe palette (so named because colors of the palette will display correctly on both Mac and Windows platforms) contains 216 colors (not a full 256 colors) as seen below.

Look familiar? Sure it does, we just showed it to you. The 8-bit Mosaic Windows palette is an exact color-for-color match of the Mac System palette, minus the last 40 colors. And, as Mosaic is the basis of the Web's most popular browsers (including Netscape Navigator and Microsoft Internet Explorer), to be assured of designing pages with colors that won't dither or shift on either platform, we need to look no further than this browser-safe palette.

(Another quick note about the browser-safe palette: the palette is often referred to as the Netscape palette — as Netscape was the first popular commercial browser and the first to publish information on the colors of the palette. Only over the past year or so have people begun to refer to the palette in more appropriate terms. If you still hear a reference to the Netscape palette, you'll know they are referring to the browser-safe palette.)

With that cleared up, let's move on to understanding how hexadecimal works.

When Does 25 equal 19? When it's Hexadecimal

How do you convert RGB values, from a program like Photoshop, to hexadecimal? Well, unfortunately it involves math, and if you're a right-brainer like me, that doesn't bode well. Fortunately though, it's easy to develop an understanding of the math involved in conversion.

The hexadecimal system is a base-16 system, as opposed to the base-10 system Photoshop uses to display RGB values. In order to use RGB values from Photoshop as a BGCOLOR, they must first be converted to hexadecimal. The BGCOLOR attribute uses a six-character set. The first two characters represent the red value, the next two characters green, and the last set of two represent the blue value.

To convert a red, green or blue value to hexadecimal, you must first divide the value by 16, subtract the integer (this becomes the first value of the two-character set) and multiply the remainder by 16 for the second value.

I know, I know, you're reaching for the mouse to scroll back up to the section where I mentioned it was easy, but before you do, let me explain it with an example:

Let's take this RGB value from Photoshop's Picker:

First, we'll start with the red value of 212. Divide 212 by 16 and you get 13.25. Thirteen is the first value of the two-character set, but because we are dealing with the base-16 hexadecimal system, 13 equals D (see the chart below). Next, take the remainder (.25) and multiply it by 16. You should get a value of 4. So, the RGB value of 212, in Photoshop, equals D4 in hexadecimal. See, it is easy! Now, repeat the steps for the other two values. You'll end up with D4 for red, 9F for green, and 55 for blue. Which, if put into a BODY tag should produce the same brown, shown in Photoshop's picker, in the background of the Web page. See how it looks here.

But What About the Browser-Safe Colors?

OK, if you're on your toes, you might have noticed that the brown in the example above isn't a browser-safe color. So you may be thinking, "Which colors are browser safe, what are their values, and how the heck am I going to remember 216 of them?"

Well, it's not as difficult as it may seem. All the values in the browser-safe color palette were mathmatically determined using a 6x6x6 cube. This means that all the RGB values in the browser-safe palette are combinations of the same six color values. What are these values then? Well, that's easy to remember too. The values are in 20% increments of each color (red, green and blue). In percentages the values are 0%, 20%, 40%, 60%, 80% and 100% (six values, see?). In decimal, the values are the same percentages of 255 (you may be thinking, "Why not 256?" Well, because 0 counts as the first number, so 0 plus 255 equals 256 total colors). So the browser-safe decimal values are: 0 (0% of 255), 51 (20% of 255), 102 (40%), 153 (60%), 204 (80%) and 255 (100%). You may also notice that all six of the decimal values are multiples of 51 (20%), which will aid in memorizing the values.

Finally, if you convert those decimal values to hexadecimal as described above, you'll get values of 00, 33, 66, 99, CC, and FF. Put any combination of those six values together (for example: 006699 or 99CC00) and you've got a browser-safe color.

Just memorize these six values, or remember the 20% rule, and you can assemble any browser-safe color at a moment's notice!

Update for Macintosh Netscape 4.0x Users

With version 4.0 of their popular Web browser, Netscape has changed the way they work with color palettes on the Macintosh. In previous versions, when running in 8-bit mode, Netscape would use the 256-color Macintosh System palette. In 4.0x versions, Netscape will strictly adhere to the 216-color browser-safe palette. This means if your graphics contain any of the 40 extra colors in the Macintosh System palette, they will dither in 8-bit mode.

Some see this as a bug, though Netscape no doubt sees it as standardizing the two platforms. However, there is a minor display bug in Netscape 4.0x which occasionally causes graphics to be dithered to the browser-safe palette even when in 24-bit color mode. Netscape has no comment on whether this bug will be fixed.

BGCOLOR Details

BGCOLOR: The BGCOLOR attribute of the BODY tag allows you to specify an overall color to the background of a Web page. This method of altering the background is faster than downloading a background GIF, and it is supported by all major browsers. A typical BODY statement would look like this:

<BODY BGCOLOR="#ffffff">

This tag forces the background color to white (ffffff). You can also use the BODY tag to change the color of the TEXT, the hyperlinks (LINK), the visited hyperlinks (VLINK), and the currently active links (ALINK):

<BODY BGCOLOR="#000000" TEXT="#000000" LINK="#000000" VLINK="#000000" ALINK="#000000">

When Netscape first introduced these extensions to the "approved" set of HTML codes, many purists rebelled by setting the BODY attributes to the hexadecimal numbers above, producing a black page with black text and links, rendering it unreadable to anyone viewing it with Netscape.