|
|
|||
|
|
|
|
|
|
||||
        
|
 |
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,
<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.
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! |