Back to the Web Design Home Page Buy Now - available at Amazon.com
Overview Chapters Examples Resources
Chapters
Complete Chapters
Chapter 1

Chapter 5

Chapter 9

Chapter 13

Appendix B



Check Out These Other Books!

Chapter 13: Color
Web Color Basics
Anyone familiar with Photoshop or similar programs will probably know the basics of RGB color. In such a graphics program, each of the three color elements, red, green, and blue, can have values from 0 to 255, generally expressed as three numbers separated by commas. So, in the RGB triplet 102,153,204, the number 102 is the red value, 153 is the green value, and 204 is the blue value. All this is very well and good when you're working in a graphics program, but Web technologies do not always measure color with decimal values, but often rely on hexadecimal (base-16) values.

In HTML, color is specified by a hexadecimal RGB triplet preceded by the pound sign (#). The color is six digits long, two hex digits for each byte. So, in the RGB triplet #FF12AC,
  • 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, which here is fairly low.
  • The last two digits (AC) represent the intensity of the blue part of the pixel, and here it's fairly high.
The end result is a bright pink color that might be used in markup like this:

<font color="#ff12ac">Hot Pink!</font>
In HTML and CSS, we measure color in a hexadecimal range of 00–FF, which is equivalent to 0–255 in decimal. It's relatively easy to translate RGB values to hexadecimal values by referring to a translation chart, such as the one found in Appendix F. Given such a chart, a mid-range blue like rgb (102,153,204) would be represented in hex as #6699CC.

It also is possible to reference the color by name in the code (for example, "black"). The 16 basic names originally defined by Microsoft are now part of the HTML specification; these appear alongside their hexadecimal values in Table 13-3.

Color Name Hex value
Black #000000
White #ffffff
Gray #808080
Silver #c0c0c0
Green #008000
Lime #00ff00
Olive #808000
Yellow #ffff00
Aqua #00ffff
Teal #008080
Blue #0000ff
Navy #000080
Fuchsia #ff00ff
Purple #800080
Red #ff0000
Maroon #800000
Table 3: HTML Specification Colors

These are just a few of the colors available. By using RGB triplets translated to a hex value, it is possible to use 256 shades of red, green, and blue to create colors—somewhere around 16.4 million colors! There are over one hundred more color names originally introduced by Netscape and based upon the X11 windowing system colors. These colors are largely supported by most Web browsers. Believe it or not, they include such varied color names as "tomato," "thistle," and "lightcoral."

Online: The full list of color names and their hexadecimal and RGB equivalents can be seen online at http://www.htmlref.com/Reference/AppE/colorchart.htm

One could, of course, use any word, such as pineapplesherbet (not a real value), as a color value; browsers will attempt to render them, but if they are not recognized color names, the rendering will have no relation to the meaning of the word. Our imaginary value pineapplesherbet renders as a shade of blue in Internet Explorer, but as a completely different, much darker blue in Netscape. Either way, it doesn't look like pineapple sherbet. Therefore, it is important to specify the exact color you wish to reproduce with its correct hexadecimal value in order to avoid different browser interpretations. For example, the defined color name aquamarine is equivalent to an RGB value of 127,255,212, which translates to a hexadecimal value of #7FFFD4. Unfortunately, as with many of the other named colors, this is not a browser-safe color. In general, it is preferable to use a hexadecimal code to indicate color. Doing so greatly reduces the chance that the color will be rendered incorrectly.

Rule: To ensure that the appropriate color is produced, always use a hexadecimal value over a named color, except in the case of basic VGA colors like white, black, red, and so on.


Next: HTML Color Use


Overview | Chapters | Examples | Resources | Buy the Book!
Available at Amazon.com Available at Amazon.com