1. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition1  Wiley and the book authors, 2002 Web Design in a Nutshell Chapter 16: Specifying Color in HTML

2. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition2  Wiley and the book authors, 2002 Summary  The hexadecimal system  Hex values for web palette colors  Specifying colors by name  Color name cautions

3. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition3  Wiley and the book authors, 2002 Synopsis You can specify the color of certain page elements using HTML tags and CSS rules. There are 2 main methods for specifying colors in web documents: RGB values and color names The most common and precise way to specify a color in HTML is by its numerical RGB (red, green, blue) values. Once you’ve identified the red, green, and blue values of your chosen color, you need to translate them to their hexadecimal equivalents in order to enter them into the HTML color tags in the format #RRGGBB where RR represents the hex red value, GG the hex green value, and BB the hex blue value. Using these values, you can specify any color from the “true color” space (millions of colors).

4. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition4  Wiley and the book authors, 2002 The hexadecimal system The hexadecimal numbering system is base-16 (as compared to base-10 for decimal numbers) using the characters 0-9 and A-F (where A-F represent the decimal values 10-15). The 2-byte hexadecimal values 00-FF represent the decimal values 0-255 MS Windows provides a calculator which can be utilized to convert from decimal to hexadecimal  Open the windows calculator (usually located at Start->Programs- >Accessories->Calculator)  From the View menu, select Scientific  Make sure that the Dec option is selected and enter your decimal value  Select the Hex option and it will display your entered decimal value in its hexadecimal equivalent

5. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition5  Wiley and the book authors, 2002 Hex values for web palette colors The web palette is a set of 216 colors that will not shift or dither when rendered on 8-bit monitors. All colors in the web palette are made up of combinations of the following 6 hexadecimal values: 00, 33, 66, 99, CC, and FF (e.g. #3399CC)

6. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition6  Wiley and the book authors, 2002 Specifying colors by name Colors can also be identified by one of 140 color names originally developed for the X-Window system. To set the background color to a dark olive green using a color name, the HTML attribute would look like this: bgcolor=“darkolivegreen” There are also one hundred variants of gray numbered 1 through 100.  Gray1 is the darkest; gray100 is the lightest  The color we generally think of as gray is roughly equivalent to gray75  Both spellings gray and grey are acceptable

7. _______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition7  Wiley and the book authors, 2002 Color name cautions There are several potential pitfalls to using color names instead of numeric color values:  Browser support  Color names are supported by Navigator 2+ and IE 3+  Color shifting  Of the 140 color names, only 10 represent non-dithering colors from the web palette: aqua, black, blue, cyan, fuchsia, lime magenta, red, white, and yellow  When viewed on an 8-bit display, the remaining 130 colors shift to their nearest web palette equivalent (or system palette color). In many cases, the difference is drastic. Many of the pastels shift to solid white. Samples of the web safe colors and the named colors can be found at: http://siu.globaleyes.com/files/HTML/ColorChart.html http://siu.globaleyes.com/files/HTML/ColorChart.html