Introduction to RGB Color

HTML 3.2 allows you to specify colors for such elements as backgrounds, text, and links. While there is a short list of colors that can be specified by name, for the most part you will end up specifying colors by number. What do these numbers mean, and how do you know which ones to use?

Color Mixing

To begin with, understand that all color is a response of your visual system (your eyes and the part of your brain that interprets the nerve impulses they send) to light. Most everyday objects, like paper, do not emit light; instead, they absorb part of the light which falls upon them and reflect the rest. The color composition of the reflected part determines what color the object appears to be.

When you learned about colors in school, for example by mixing paints, you probably learned that the primary colors were red and yellow and blue, and that combining these would produce new colors: red and yellow make orange, red and blue make purple, yellow and blue make green. The more paint you mix together, the darker the result; red plus yellow plus blue is a dark brown or muddy gray, almost black. This is "subtractive" color; the property of the paint that stays constant is what it absorbs, not what it reflects. So when you mix, each pigment absorbs its characteristic colors: the blend absorbs more and reflects less, and is therefore darker.

Your monitor screen, on the other hand, actively emits light. The more light, the brighter the color, and when you mix two colors, the result is brighter. This is "additive" color. The way colors mix is just as intuitive, once you get used to it; it just isn't as familiar to most people. (For those who are used to subtractive color, it seems completely backwards at first. This is reasonable; in some ways, it IS almost exactly backwards, just as addition is the reverse of subtraction.)

The primary additive colors are red, blue, and green. When you mix red and blue, you get a sort of purplish color called magenta, which is not far off what you'd expect, except that it's a little brighter than what you'd get if you were mixing red and blue paint. Similarly, blue and green produce a bluish-green color called cyan. The surprise (for most people) is what happens when you mix red and green. With paints, you'd get brown; with light, you get bright yellow. Mix all the colors together, red plus blue plus green, and you get bright white.

Color Numbers

The RGB color system uses numbers to specify how much of each of the (additive) primary colors--red, green, and blue--to add to the mixture. Lower numbers mean add less, high numbers mean add more. Each part has two digits, so you get:

#RRGGBB

where RR are the digits for red, GG for green, and BB for blue.

The odd part is the kind of representation that HTML uses for these numbers, and not the numbers themselves. HTML uses "hexadecimal" (base 16) numbers, which use 0 through 9 AND A through F as digits. The rightmost digit is the "ones," just like always, but the next higher digit is "sixteens," rather than just "tens". So 01 is one, and 09 is nine, but 0A is ten, 0C is twelve, 0F is fifteen, 10 is sixteen, 20 is thirty-two, and 3A is fifty-eight (three sixteens and ten ones). The numbers range from 00 for zero through FF, which is two hundred and fifty-five. It's not hard to learn to convert hexadecimal numbers to everyday decimal ones, but the point is, you don't actually need to.

All you really need to be able to do is to judge more and less. You don't need to know exactly what numbers 3D and 7F represent in order to know that 7F is bigger, and by a fair amount, too. Similarly, AB is bigger than A6, but not by all that much.

So, if you want to create a mixture that's almost white, like a very light blue (something that would work well as a background for black text, like a pale pastel paper color), you can reason about it as follows:

• First, you want something that's close to white, #FFFFFF. The farther it is from this, the darker it will be.

• Second, since you want it to be bluish, it must have more blue in it then either red or green. Remember that basic blue is #0000FF, and you want something between this and #FFFFFF.

• Third, the amounts of red and green must be nearly equal to each other (and both must be significantly less than the blue). Slightly more red makes the mix a little bit lavender, slightly more green makes it a little bit aqua.

So, as a first try, you might set red and green at "halfway" (which is either 7F or 80) and see what the result looks like. You'll find that #8080FF is, in fact, a light blue (lighter than #0000FF), but it is too dark to make a good background. So you try again, adjusting your numbers higher (to get a brighter overall result). Increase red and green halfway again between 80 and FF, to C0. See what #C0C0FF looks like. (I wanted something that was lighter still, so I tried #E0E0FF. I decided that this looked slightly too purplish, so I increased the green, and finally settled on #E0E8FF.)

So, as an exercise, try this: what color would you expect #D0FF00 to be? Try to figure it out analytically before you go look at it. (Hint: What color is #FFFF00? How is #D0FF00 like this, and how is it different?) You can try out various color combinations at the URL:

http://www.imagitek.com/bcs.html

A Final Word

As you begin to experiment with different colors for text and backgrounds, please keep in mind the effect that this will have on your readers. What sort of book changes paper color from page to page? Would you find a book that did this easier to read, or harder? Some color combinations work better than others; you must have enough contrast between the text and the background for the text to be readable. Black or dark blue text on white works well, whereas red text on bright blue is downright irritating (try it!). Reversed color schemes (white text on a dark background) can be nearly as effective as dark on light color schemes, with one minor note: they may not print as well (some browsers offer an option in print setup to print text as black; without this option set, many white-on-color pages will print as if they were blank).

Some color schemes that work well: black text on white or any very pale off-white (off-whites in the direction of grey, cream, tan, yellow, blue, or green seem to work best). Dark blue, dark brown, or most of the darker greys work almost as well as black. White or bright yellow on black also works fairly well; this is eyecatching, but may be a bit strenuous if you have a lot of text. Red text on a white or yellow background (or white or yellow text on a red background), same comment.

Some examples of the effect of color choices (this page, in different color schemes):

• Example 1
• Example 2
• Example 3
• Example 4

Also keep in mind that certain color combinations may connote certain moods or meanings; this is great if you intended to do this, and very unfortunate otherwise. For example, red text on a bright yellow background is very readable, and catches your attention besides. That's why it's used for WARNING, CAUTION, and EMERGENCY signs. Most readers will react to this color combination in exactly that way, even if that isn't your message. Depending on your audience, that fact that different cultures attach different meanings to certain color combinations may also be significant.