Colors in HTML and CSS
= Index DOT Html/Css by Brian Wilson =

Index DOT Html: Main Index | Element Tree | Element Index | HTML Support History
Index DOT Css: Main Index | Property Index | CSS Support History | Browser History

Color References in HTML and CSS
There are many cases when HTML and CSS specify colors for presentation of a portion of the document tree. In the computer and publishing industries, many different syntaxes and methods have evolved to represent a color, whether it be by a conglomeration of color component values or by a friendly common name. Each of the methods available in HTML and CSS have a specific number of allowed values. When an attempt is made to render a color, it is displayed as specified, unless the presentation medium can not support it (for any number of reasons, such as limitations in the OS or video card capability.)
Elements With Color Attributes
Misc. Elements: <Basefont>, <Body>, <Font>, <Frame>, <Frameset>, <Hr>, <Ilayer>, <Layer>, <Marquee>
Table Elements: <Table>, <Td>, <Th>, <Tr>, <Thead>, <Tbody>, <Tfoot>
Color Specification Methods
RGB Color Components
[2|3|3.2|4] [X1|X1.1] [IE1|M2FB|N1.1|O2.1|S1]
Possible color values: 16,777,216
Description:
This method represents a color using a triplet of hexadecimal values concatenated together. These values represent the Red, Green and Blue components for a given color. The range of each component value is 00-FF in Hexadecimal (0-255 Decimal.) The total value should be prefixed by a pound "#" symbol.
Syntax:
<tag ATTRIBUTE="#RRGGBB">
(where RR, GG and BB are the respective hexadecimal values for Red, Green and Blue).
Example:
<font color="#ff802d">

Color-Safe Palette
[2|3|3.2|4] [X1|X1.1] [IE1|M2FB|N1.1|O2.1|S1]
Possible color values: 216
Description:
The syntax of this method is exactly the same as for the general RGB color component method, but represents a very useful subset of values within the 16 million allowed colors. This subset represents the palette of color values that will not dither on a system using only 256 colors. This "safe" range is composed of six equally spaced values in the 256 value range for each color component. With six values for each component, this gives a total of 216 (6 X 6 X 6) color combinations.
   Hexadecimal: 00, 33, 66, 99, cc, and ff
   Decimal: 0, 51, 102, 153, 204, and 255
Example:
<body bgcolor="#3399cc">
Color Swatches: RGB Safety Palette

Windows VGA Color Names
[2|3|3.2|4] [X1|X1.1] [IE1|M3|N2|O2.1|S1]
Possible color values: 16
Description:
These friendly color names are taken from the Windows 16-color VGA palette. The color names represent zero, half and full-values (00, 80 and ff respectively) in the RGB component method. Associating names with colors is usually easier for many authors to remember, but the cost is limiting the choice to only 16 values.
Example:
<table bordercolor="blue">
Color Swatches: VGA Color Names

X11 Color Names
[2|3|3.2|4] [X1|X1.1] [IE3|M|N2|O2.1|S1]
Possible color values: 140
Description:
While the VGA color names may be easy to remember, the range of colors is very limited. Netscape expanded this set of named colors to a standard set of 140 color names used for many years in the UNIX X11 environment. This set of names assigns arbitrary (and somewhat long) names to specific RGB values. The color values used seem fairly random and none of them are in the 216-color "safety palette" (see above,) but the X11 names DO contain all the names in the Windows VGA color name palette.
Example:
<frame bordercolor="DeepPink">
Color Swatches: X11 Color Names

User Interface Color Names
[2|3|3.2|4] [X1|X1.1] [IE4|M|N|O]
Possible color values: 28
Description:
One of the main problems in User Interface design is the inability satisfy every user. With colors especially, not every user will like or be able to efficiently use the same colors (because of visual disabilities, personal preference or other factors.) How can a page be designed with color, AND allow for such a wide spectrum of user color requirements? The answer is fairly simple - let the user decide.

Each piece of the user interface in a GUI environment usually has an addressable system name/label, from scrollbars all the way to the application background. A user will have specific colors or values specified for use by each of these pieces in the system. Colors can now be specified using these system labels to give some control over page appearance to the viewer. In theory, letting the user decide what their own user interface should look like will yield the greatest satisfaction.
Example:
<td bgcolor="ButtonFace">
Color Swatches: UI color names
Tips & Tricks Browser Peculiarities
Related Links
http://www.w3.org/Graphics/Color/sRGB
The sRGB color model, W3C.
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnwebgen/html/colorpick.asp
"The Safety Palette", by Robert Hess of Microsoft.
http://www.lynda.com/hex.html
Lynda Weinman's pages are considered by many to be de-facto standard reading on color issues.
http://web.archive.org/web/20020201212126/http://www.two4u.com/bg-faq/
The Background FAQ, maintained by Mark Koenen. A bit old, but still some good information here. [Archive.org copy]
http://www.firelily.com/opinions/color.html
"Color Vision, Color Deficiency," by Diane Wilson. Good discussion of color issues to keep in mind when considering the needs of your reader.
http://www.visibone.com/colorlab/
Possibly the best visual representation I have ever seen of the 216-color "Safety Palette."
http://www.bagism.com/colormaker/
An excellent color picker page.

Boring Copyright Stuff...