Colors

Support Key: [CSS1|CSS2|CSS2.1] [IE3B1|N4B2|O3.5|S1]
Other Units
Relative Length
Absolute Length
URL
Angle
Time
Frequency
= Index DOT Css by Brian Wilson =
Main Index | Property Index | CSS Support History | Browser History



What is it?
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 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.) In such a case the closest suitable match is used, or more commonly, the color value will be approximated using dithering.
A special color subset: The Color-Safe Palette
A very useful subset of values within the 16 million colors range is the non-dithering "Color-Safe Palette". This subset represents the palette of color values that will not dither on a system that uses 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
   Percentage: 0%, 20%, 40%, 60% 80%, and 100%
Color Units in CSS
[#RGB]
[CSS1|CSS2|CSS2.1] [IE3B1|N4B2|O3.5|S1]
Possible Color Values: 4096
Syntax: #RGB
Description:
This syntax is preceded by a '#' symbol, and represents a three character hexadecimal string for each of the component values for Red, Green and Blue. This shorthand version of the [#RRGGBB-color] syntax duplicates the hex character for each color component to calculate the final value for each component (thus, #84A in [#RGB] syntax is equal to #8844AA in [#RRGGBB] syntax.

NOTE: Trying to map a [#RRGGBB-color] notation to [#RGB-color] notation will not usually yield the same exact color value. The method used to duplicate the second Hexadecimal number loses the least significant hexadecimal digit. The resultant color difference will be very small, but can be noticeable.

[#RRGGBB]
[CSS1|CSS2|CSS2.1] [IE3B1|N4B2|O3.5|S1]
Possible Color Values: 16,777,216
Syntax: #RRGGBB
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.

[rgb(r,g,b)]
[CSS1|CSS2|CSS2.1] [IE4B3|N4B3|O3.5|S1]
Possible Color Values: 16,777,216
Syntax: rgb(r,g,b)
Description:
This value is a comma separated list of integer values from 0-255 for the Red, Green and Blue components of the color (just as with the #RRGGBB method.) The notation is nested in parentheses and preceded by the keyword 'rgb'.

[rgb(r%,g%,b%)]
[CSS1|CSS2|CSS2.1] [IE4B3|N4B3|O3.5|S1]
Possible Color Values: 16,777,216
Syntax: rgb(r%,g%,b%)
Description:
This value is a comma separated list of floating point percentage values for each Red, Green and Blue color component. A value of 0% represents the absence of a color component, while a value of 100% represents full presence of the color component. The notation is nested in parentheses and preceded by the keyword 'rgb'.

[VGA Name]
[CSS1|CSS2|CSS2.1] [IE3B1|N4B2|O3.5|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.
Color Swatches: VGA Color Names

[X11 Name]
[IE3|N4|O4|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 in its version 2.0 browser 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.
Color Swatches: X11 Color Names

[UI Name]
[CSS2|CSS2.1] [IE4|N6|O6|S1]
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. If the browser does not have a color associated with a given UI name, it should be mapped to the color of the nearest available UI component, or instead to a default color.
Color Swatches: UI color names
Example
span { color: green }
Browser Peculiarities

Boring Copyright Stuff....