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 |
IE3B1 | N4B2 |
O3.5
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 |
IE3B1 | N4B2 |
O3.5
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 |
IE4B3 | N4B3 |
O3.5
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 |
IE4B3 | N4B3 |
O3.5
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 |
IE3B1 | N4B2 |
O3.5
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.
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.
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.