This chapter is from the book
This chapter is from the book
This chapter is from the book
Representing Colors in HTML and XHTML
Whenever you define colors in HTML and XHTML documents, you must represent those colors according to the allowed data types.
The color representations discussed in this section are based on the use of presentational syntax. Because most presentational elements and attributes are deprecated in HTML 4.0 and 4.01, and XHTML, if you use them at all it will be in transitional documents. In strict document authoring, colors are defined in style sheets. The means for representing color via style include both methods described here as well as a third method, the use of actual RGB values.
To learn more about style sheets, please see "Using CSS with HTML and XHTML," p. 345, Chapter 14.
There are two means of representing color directly in HTML and XHTML:
A hexadecimal number
A color name as defined in the language's specification
Hexadecimal, also referred to as "hex," is a base-16 alphanumeric representation of numbers. It is used in HTML and XHTML to represent the RGB (red, green, blue) color space. This color space is based on additive synthesis, which refers to the method used by computer hardware and software to project color onto the screen.
Numbers in hexadecimal as used by HTML and XHTML contain three or six digits and may be made up of any combination of the letters A–F and the numbers 1–9. When writing hex colors as attribute values, you'll precede the number with a hash (#) mark:
text="#FFFFFF"
Each consecutive pair of digits in a hex number represents the value of red, green, and blue respectively. In the case of FFFFFF, which represents white, the first FF corresponds to the red value of 255, the second one does also for green, as does the third pair for blue. Using decimal values, this might be written 255, 255, 255. You might also see the color represented using a shorter, three-character version, such as FFF. This has a value equivalent to that represented by FFFFFF.
There are also 16 color names defined for use within HTML and XHTML. If you are using a color name as a value, you simply write the color name:
text="white"
Each of the 16 color names in HTML and XHTML has a corresponding hexadecimal representation. Table 3.2 defines the available color names as well as their hexadecimal counterparts.
Table 3.2 Color Names in HTML and XHTML
|
Color Name |
Hexadecimal Representation |
|
Black |
000000 |
|
Silver |
C0C0C0 |
|
Gray |
808080 |
|
White |
FFFFFF |
|
Maroon |
800000 |
|
Red |
FF0000 |
|
Purple |
800080 |
|
Fuchsia |
FF00FF |
|
Green |
008000 |
|
Lime |
00FF00 |
|
Olive |
808000 |
|
Yellow |
FFFF00 |
|
Navy |
000080 |
|
Blue |
0000FF |
|
Teal |
008080 |
|
Aqua |
00FFFF |
Although you are limited to the use of one of the available 16 color names, you can use any hexadecimal value you like, including those shown here. However, there are some concerns regarding the use of color and color names, which are addressed in the sidebar, "Web-Safe Color and Browser-Defined Color Names."
There are two other issues of which to be aware when authoring colors in HTML and XHTML:
Color combinations—Background, text, and link colors should be combined in such a way as to ensure readability. This means ensuring that contrast between the colors is high. Another concern with color combining is for the color-blind, where you can use certain color combinations in order to ensure color-blind readers will be able to distinguish the colors appropriately.
Setting all properties—If you use a background color (or a background graphic) be sure to define all the related properties (text, link, alink, vlink) as well. If you use a background graphic, I recommend using a similar background color as well as it will load first and subtly prepare the audience for the color scheme. This is simply a choice based on aesthetics, there is no technical rule that says this must be done.
Read more about contrast and the use of color in cases of color-blindness in "Creating Accessible Sites," p. 419, Chapter 17.
Web-Safe Color and Browser-Defined Color Names
Many readers have long been familiar with the concept of Web-safe color. These are the 216 colors that have been determined to be the most likely to be part of the native color table of a given operating system. Especially important in situations where you realize your audience has limited hardware capacity and may be viewing pages at 256 colors, the use of Web-safe color has been somewhat disputed over the years.
There are several interesting studies that have shown that there really are very few truly "safe" colors. And, realistically, the variations of hardware and software configurations are so many in number that there is no truly "safe" color. Each configuration will display the color differently.
Therefore, while many industry leaders recommend using only safe colors, others advocate the use of any color you'd like. My approach is based on audience: if a predominance of people who will visit a given site have contemporary hardware and software, it's likely they can manage any color quite well, so in that case you can use unsafe color.
Another issue is the use of browser-defined color names. These names conform to another convention, known as the X11 color list. These are color names that some browser manufacturers have incorporated into their software, but do not conform to recommendations. While most contemporary browsers will have no problem displaying browser-defined names, they are not part of the HTML or XHTML specifications covered in this book and therefore cannot be used if you're authoring conforming documents.