Chapter 5, Lesson 1

If you already know how the browser uses color, and how it interprets the RGB color codes, you can skip this lesson.

Colors for Web pages are a wonderful thing to behold, but getting there is not exactly straightforward. As we talk about colors in these lessons, we'll also suggest guidelines for successful color selection, or at least provide enough information so that you can make a measured decision about color selection.

Several things serve to complicate the use of colors with computerized documents (like your web page). First of all, it is impossible to know what kind of computer monitor or graphics board will be used to observe your web page. Different kinds of monitors have different color rendition. Different graphics (video) boards provide different resolutions and color pallettes. A color pallette is a table of values in memory that is used by your computer to convert computer numerics to their corresponding color. When we speak of color pallettes, the number of colors in that pallette corresponds to the number of entries in the table of values. Even if you have a whiz-bang video board that can provide a quadrillion color pallette, the software you're running may insist on providing only 16 of them.

For example, the default color pallette for MS Windows 3.1 is 16 colors. If you specify a color that is not one of those exact 16 colors, then the software will substitute what it considers to be a "close-enough" color, or, even stranger, it will try to simulate the color by a process called "dithering". The difference between the color you, the web page author, thought you were specifying, and what shows on the screen, can be outrageous.

To make matters worse, there are no standards for color pallettes. Take a 256-color pallette. Not all 256-color pallettes provide the same exact colors (though they will , typically, be pretty close). The 16-color pallette used by MS Windows, however, is fairly well established, and has even migrated to other desktops such as MacIntosh, but some older systems may have their own ideas about what a 16-color pallette should be. Typical color palletes have 16, 256, 16383, and 16 million colors.

The designers of HTML (super-brains that they are) were well-aware of these kinds of incompatibilities, and basicly "passed the buck". Their philosophy was: "We'll make sure you can specify all the colors you want, but it will be up to you decide which are appropriate" (i.e., we'll supply the rope, but you have to tie the noose...). So they devised a method to specify up to 16 million colors in a web document. What happens after that "ain't their problem".

But the HTML wizards are nerds of the first degree. This is truly a compliment, but a side effect of this is that they are a wee-bit out-of-touch with the real world. Consequently, they came up with a very simple, yet almost indecipherable (to you and me) means of specifying colors. Let's call it the "RGB code" (for Red-Green-Blue) - and we do mean "code" (as in "secret"). Let's elaborate just a little...

From high school physical sciences, we recall that any color can be constructed by properly mixing the three primary colors of light: Red, Green, and Blue. This is the same principle that allows color televisions to work. If you look really closely at a white section on the screen, you'll see that, for each screen pixel (dot), there are three closely-spaced adjacent dots; one is Red, one is Green, and one is Blue. If all three dots are turned "full-on", you get white. If all three dots are turned "half-on", you get grey. If all three dots are turned completely off, you get black. Neat, huh? To get colors, you turn some of the dots off, while turning other on. For example, if we turn the red and green dots "full-on", but turn the blue dot "full-off", we get yellow.

Well, all this is remarkably fascinating, to be sure, but how does HTML make colors? The RGB code used by HTML consists of three numbers, representing (in order) how much Red, how much Green, and how much Blue. Any of the three numbers can take any value from 0-255, where '0' represents "full-OFF" and 255 represents "full-ON". [ Why 255? It's a magic number in computer hardware, representing an 8-bit number, or a "byte". We, frankly, don't care what number they picked, as long as we know what it is.] Knowing, now, that 255 is full-ON, and 0 is full-OFF, we can adjust the amount of Red, Green, or Blue by adjusting that color's number. For example, if we set it to 127, the brightness of that particular color will be 127/255, or roughly half brightness. Simple enough, heh? Well, if you do the mathematics, you discover that we're talking about over 16 million color tones. That's a lot, far too many to just learn by rote.

Now I have to tell you the really bad news. Remember the number I referred to, 0 - 255? What I neglected to mention is that each of the three numbers is in 'hexadecimal' code, which comes out as 00 - FF. Computers nerds will have no problem with this, but real people are going to be completely bamboozled by it. We give up.

We'll show you how to work around this, but for now remember this: the RGB code consists of three (3) numbers, representing a scaled brightness for Red, Green, and Blue. Each number consists of two (2) characters, so that the resulting RGB code consists of six (6) characters. On top of that, we place a '#' sign directly in front of the code, without spaces, to mark the beginning of the code. Here are the codes for the standard "Windows" 16-color pallette [ note: those are "zeros" not "O"s ]:

black = #000000        white = #FFFFFF 
silver = #C0C0C0       gray = #808080
red = #FF0000          maroon = #800000
fuchsia = #FF00FF      purple = #800080
blue = #0000FF         navy = #000080
aqua = #00FFFF         teal = #008080
lime = #00FF00         green = #008000
yellow = #FFFF00       olive = #808000                                     

---

Overseer: Monty Northrup ... ... leave e-mail ...

---