Email	Print Reprint
	add to:
	Del.icio.us Digg Google Furl	Slashdot Y! MyWeb Blink

Accurate Color on the Web

To understand how your computer creates colors for display, we need to first understand a little about the hexadecimal numbering system. Then we'll cover how a system uses hexadecimal values to call a triplet of primary colors to tune a pixel just right to display one of 16 million colors.

Hexadecimal Numbers

The hexadecimal system is a base 16 number system. We're used to a base 10 number system. What does this mean? Well, it means that you have six extra digits to deal with. We write every numbering system basically the same way, using a series of single digits to reach the base number (for example, 10 or 16), where we add a second digit.

In the base 10 numbering system, decimal, we use the digits from 0 to 9 to write all our numbers. In base 16, hexadecimal, we use the digits of 0 through F, where A=10 decimal, B=11 decimal, C=12 decimal, D=13 decimal, E=14 decimal, and F=15 decimal.

So while we count like this in decimal:

We count this way in hexadecimal:

Reading larger hexadecimal numbers is done the same way that you read in decimal, although you may not realize it. In the decimal system that we use, everything is a power of 10, even though we don't really think of it in this way.

For example, the number 16345 in decimal is really:

So, in hexadecimal, this number would be 3FD9 (and remember that F=15 decimal and D=13 decimal), which may also be expressed as:

Now that you have the general idea of hexadecimal, you may ask why we bother to have a different system. Computer gurus long ago decided to make hexadecimal the standard for computer languages, even though the computer itself operates in a base 2 system (0,1). If you have ever done any lower level programming you will realize that hexadecimal is easier to read because it also allows us to write huge decimal numbers using fewer digits. I will not go into how to convert between bases because it is beyond the scope of this tutorial and all that you really need is a calculator for converting and an understanding of what hexadecimal is.

RGB (Red, Green and Blue) Triplets

Monitors display everything via pixels, which are tiny dots on the screen that are composed of a red, green, and blue part. In fact, these colors are the also the primary colors of our color spectrum. All colors that we see are composed of a mixture of wavelengths of red, green, and blue light. In order to color in a pixel, we can adjust the intensities of the red, green, and blue parts of the pixel to form different colors. For example, if all of these parts are turned off the pixel is black. If all of them are on, the pixel is white. And if only the blue part of the pixel is turned on the pixel will be blue.

HTML, like many computer languages, relies on RGB (red, green, blue) triblets to assign color values to a pixel. An RGB triplet, for our purposes, will be 3 bytes, which is 1 byte for each component of the RGB triplet. Since there are 8 bits in a byte, an RGB triplet is also 24-bit color.

The range of a single byte is from between 0-255 in decimal, which is equivalent to 0-ff in hexadecimal. In HTML you may have seen something like this:

This color value is actually an RGB triplet that is being read in hexadecimal by the computer. It's six digits long, two digits for each byte. In this HTML RGB triplet,

• the first two digits (ff) represent the intensity of the red component of the pixel, which is at full strength because a byte cannot be greater than FF.
• The next two digits (12) represent the intensity of the green component of the pixel, it is fairly low.
• The last two digits (ac) represent the intensity of the blue part of the pixel, and it's fairly high.

The end result is a pink pixel.

In most programming languages, you must indicate that a string of numbers is hexadecimal. In JavaScript, for example, you have to precede hexadecimal numbers with 0x to avoid confusion with decimal values. To write the previous RGB triplet using JavaScript, we would use 0xFF12AC. For example, in JavaScript we can make the background color of a page pink by using:

By using an RGB triplet, we are able to use 256 shades of red, green, and blue to make our colors, this works out to be somewhere around 16.4 million colors!

Web Palette

That said, our range for anything that will display in a browser is a bit smaller. Netscape Navigator and Microsoft Internet Explorer rely on a palette of 216 colors, which is all the Microsoft and Macintosh platforms have in common.

For more details on this browser-safe palette, see Bob Schmitt's web color primer from the Nov. 18, 1997, issue of Web Review.

Tools for Color Management
How Color Works

RELATED ARTICLES No Related Articles		TOP 5 ARTICLES No Top Articles.