HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [69]
Using color names
Color names seem like the easiest solution, and, for basic colors like red and yellow, they work fine. However, here are some problems with color names that make them troublesome for Web developers:
♦ Only 16 color names will validate. Although most browsers accept hundreds of color names, only 16 are guaranteed to validate in CSS and XHTML validators. See Table 1-1 for a list of those 16 colors.
♦ Color names are somewhat subjective. You’ll find different opinions on what exactly constitutes any particular color, especially when you get to the more obscure colors. (I personally wasn’t aware that PeachPuff and PapayaWhip are colors. They sound more like dessert recipes to me.)
♦ It can be difficult to modify a color. For example, what color is a tad bluer than Gainsboro? (Yeah, that’s a color name, too. I had no idea how extensive my color disability really was.)
♦ They’re hard to match. Let’s say you’re building an online shrine to your cat and you want the text to match your cat’s eye color. It’ll be hard to figure out exactly what color name corresponds to your cat’s eyes. I guess you could ask.
Table 1-1 Legal Color Names and Hex Equivalents
Color
Hex Value
Black
#000000
Silver
#C0C0C0
Gray
#808080
White
#FFFFFF
Maroon
#800000
Red
#FF0000
Purple
#800080
Fuchsia
#FF00FF
Green
#008800
Lime
#00FF00
Olive
#808000
Yellow
#FFFF00
Navy
#000080
Blue
#0000FF
Teal
#008080
Aqua
#00FFFF
The mysterious hex codes are included in this table for completeness. It’s okay if you don’t understand what they’re about. All is revealed in the next section.
Obviously, I can’t show you actual colors in this black-and-white book, so I added a simple page to the CD-ROM and Web site that displays all the named colors. Check namedColors.html to see the actual colors.
Putting a hex on your colors
Colors in HTML are a strange thing. The “easy” way (with color names) turns out to have many problems. The method most Web developers really use sounds a lot harder, but it isn’t as bad as it may seem at first. The hex color scheme uses a seemingly bizarre combination of numbers and letters to determine color values. #00FFFF is aqua. #FFFF00 is yellow. It’s a scheme only a computer scientist could love. Yet, after you get used to it, you’ll find the system has its own geeky charm. (And isn’t geeky charm the best kind?)
Hex colors work by describing exactly what the computer is doing, so you have to know a little more about how computers work with color. Each dot (or pixel) on the screen is actually composed of three tiny beams of light (or LCD diodes or something similar). Each pixel has tiny red, green, and blue beams.
The light beams work kind of like stage lights. Imagine a black stage with three spotlights (red, green, and blue) trained on the same spot. If all the lights are off, the stage is completely dark. If you turn on only the red light, you see red. You can turn on combinations to get new colors. For example, turning on red and green creates a spot of yellow light. Turning on all three lights makes white.
Coloring by number
You could devise a simple system to describe colors by using 1 to represent on and 0 to represent off. In this system, three digits represent each color, with one digit each for red, green, and blue. So, red would be 100 (turn on red, but turn off green and blue), and 111 would be white (turn on all three lights).
This system produces only eight colors. In a computer system, each of the little lights can be adjusted to various levels of brightness. These values measure from 0 (all the way off) to 255 (all the way on). Therefore, you could describe red as rgb(255, 0, 0) and yellow as rgb(255, 255, 0).
The 0 to 255 range of values seems strange because you’re probably used to base 10 mathematics. The computer actually stores values in binary notation.