Transcript Chapter 16: Specifying Color in HTML

Web Design in a Nutshell
Chapter 16: Specifying Color in HTML
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
1
 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
2
 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
3
 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
4
 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
5
 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
6
 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 shifting



Color names are supported by Navigator 2+ and IE 3+
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
_______________________________________________________________________________________________________________
PHP Bible, 2nd Edition
7
 Wiley and the book authors, 2002