The Color Book

Color Summary





Two Methods to Render HTML and CSS Color

HTML and CSS provides two primary methods to render color.





RGB Triplet

RGB represents the three primary colors: Red, Green and Blue. The color intensity for each of the three primary colors can range from 0 to 255. Where 0 intensity is the absence of color and 255 is complete color saturation. When the intensity number for each of the three primary colors are combined, we get the RGB triplet, e.g. (126,126,126). The maximum number of colors that can be expressed with the RGB triplet is:
(256 X 256 X 256) = 2563 = 16,777,216.





Color Scales

Many applications using colors refer to intensity by means of scales. The RGB triplet can be represented with one of three intensity scales. Here are the scales that are used in Web design:

In HTML, only the hex scale is used as values in color attributes. However, with CSS, all three scales can be used to render color. Here is a brief comparative cross reference of the three scales.

CSS Color Scale Comparisons
% Scale 256 Scale Hex Scale Comment
100% 255 FF Full Intensity
80% 204 CC
60% 153 99
40% 102 66
20% 51 33
0% 0 00 Absence of Intensity




Hexadecimal

The RGB color triplet numbers that make up the value for color data types can be represented with hexadecimal numbers. Hexadecimal is a numbering system with a base of 16. Comparatively, the decimal system is a base 10 numbering system whereas, the binary numbering system is base 2. A good way to express hex is with a comparative example.

Counting from 0 to 21
Decimal Hex Binary Comment
0 0 0
1 1 1
2 2 10 First Carry for Binary
3 3 11
4 4 100
5 5 101
6 6 110
7 7 111
8 8 1000
9 9 1001
10 A 1010 First Carry for Decimal
Decimal Hex Binary Comment
11 B 1011
12 C 1100
13 D 1101
14 E 1110
15 F 1111
16 10 10000 First Carry for Hex
17 11 10001
18 12 10010
19 13 10011
20 14 10100
21 15 10101

A decimal RGB triplet of (255,102,0) would correspond to (FF,66,00) in hexadecimal. The maximum hexadecimal number for each of the three primary colors is FF which equates to 255 in decimal.





Encoding Hex Color Values

As shown above, both HTML color data types and CSS color data types can express color with a hex value. The generic syntax of this notation is #RRGGBB. "RRGGBB" represent the three primary colors; red, green and blue. The "#" sign indicates a hex number follows. The notation represents three hex numbers strung togehter without any commas, spaces or other separators between the three numbers. Each of the three numbers must show leading zeros to assure a total of six positions (two positions per primary color). A decimal RGB triplet of (255,102,0) would be encoded as #FF6600.

The above notation is not case-sensitive. The alpha numbers of a hex number (A-F) can be either lower or upper case.





Named Colors

The second method to represent color for HTML and CSS color data types is with a named color. There are approximately 140 colors that have a color name. Different browsers may render the named colors differently. It is safest to use the Hex RGB triplet number. Named colors are not the same as safe colors. Named Colors Chart

The complete set of named colors shown in the above chart are not officially supported by HTML and CSS standards. But they are commonly accepted in the industry and web browsers should render the color correctly. Other than the official 17 W3C color names (See below), the remaining named colors are not officially supported in CSS until the CSS 3.0 version.





The %Color HTML Data Type and the <color> CSS Data Type

The %Color data type refers to HTML attributes that render color definitions. The <color> CSS data type refers to CSS properties with value types that manage color.


Color Data Type Comparison - HTML Color and CSS Color
HTML Attributes that take the %Color Data Type
alink used with BODY
bgcolor used with BODY, TD, TH, TR and TABLE
color used with FONT and BASEFONT
link used with BODY
text used with BODY
vlink used with BODY
n/a
n/a
n/a
n/a
n/a
n/a
n/a
n/a
CSS Properties that take the <color> Data Type
a:active (pseudo-class)
background-color
color (the property color)
a:link (pseudo-class)
color (the property color)
a:visited (pseudo-class)
a:hover (pseudo-class)
border
border-bottom-color
border-color
border-left-color
border-right-color
border-top-color
outline-color




Deprecated HTML Color Attributes

The attributes that take the %Color HTML data type are all deprecated with HTML 4.01. The future for rendering color is with style sheets.





HTML Markup Examples Using Color Attributes and the CSS Alternative


HTML Example Comment CSS Alternative
<body vlink="purple" link="blue" alink="red"> The default colors for the attributes a:visited { color: #800080; text-decoration: underline;}
a:link { color: #0000ff; text-decoration: underline; }
a:active { color: #ff00ff; text-decoration: underline; }
a:hover { color: #2e8b57; text-decoration: underline; }
<body text="#000000" bgcolor="#FFFFFF"> White background and black text body{
color: #000000;
background-color: #FFFFFF; }
<font color="#CC6633"> A browser safe color
the font element and color attribute are deprecated
tag{ color: #CC6633; }
<td bgcolor="FF0000"> The cell's background is set to red td{ background-color: #FF0000; }




Dos and Don'ts

Do Do Not
Do use the RGB triplet Avoid most named colors Exceptions
Do use browser safe colors Avoid unsafe colors
Do use the full six digit hex triplet Do not use the shorthand hex triplet More
Do use CSS for color control Avoid the HTML deprecated color attributes




Additional Comments on Color

Top            

Rx4AJAX        About Us | Contact Us | Privacy Policy | 2008 This Site Built By PPThompson