_______________________________________________________________________________________________________________PHP Bible, 2nd Edition 1 Wiley and the book authors, 2002

Web Design in a Nutshell

Chapter 16: Specifying Color in HTML

_______________________________________________________________________________________________________________PHP Bible, 2nd Edition 2 Wiley and the book authors, 2002

Summary

The hexadecimal system Hex values for web palette colors Specifying colors by name Color name cautions

_______________________________________________________________________________________________________________PHP Bible, 2nd Edition 3 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).

_______________________________________________________________________________________________________________PHP Bible, 2nd Edition 4 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

_______________________________________________________________________________________________________________PHP Bible, 2nd Edition 5 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)

_______________________________________________________________________________________________________________PHP Bible, 2nd Edition 6 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

_______________________________________________________________________________________________________________PHP Bible, 2nd Edition 7 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