HTML and CSS Reference
In-Depth Information
When using hexadecimal notation, remember the following:
•
The color value must begin with the hash or pound sign (#). Omitting the # is a common
cause of errors.
•
You can use six-digit or three-digit hexadecimal values (see the sidebar “Shorthand
Hexadecimal Values” for an explanation of the difference).
•
Don't mix up the letter O with 0 (zero) or lowercase L with the number 1. The only letters
permitted in hexadecimal values are A-F.
•
The letters A-F in a hexadecimal value are case-insensitive. It doesn't matter whether you
use uppercase or lowercase, or even a mixture of the two.
shorthand hexadeCimal Values
Hexadecimal color values are normally expressed using six digits. The first pair represents the red
component of the color; the second pair represents the green component, and the final pair the blue
component. in CSS, if all three components contain a pair of identical digits, you can shorten each pair to
a single digit. for example, the hexadecimal value for fuchsia is
#FF00FF
, which contains three pairs of
identical digits, so it can be shorted to
#F0F
. However,
#008080
(teal) cannot be shortened, because only the
first pair of digits is identical.
Using RGB Format
As well as using hexadecimal notation to represent RGB values, you can use the
rgb()
function in a style sheet.
You specify the red, green, and blue values as a comma-separated list inside the parentheses.
he
rgb()
function accepts the values either as numbers in the range 0-255 or as percentages. For example,
you can specify red in either of the following ways:
rgb(255, 0, 0)
rgb(100%, 0%, 0%)
As with hexadecimal notation, you can normally get the correct values from a graphics program's color
picker.
Using HSL Format
A new feature in CSS3 is the ability to specify colors using hue, saturation, and lightness. This color format is
favored by many graphic designers because it's more intuitive than the RGB model. Hue is represented by an
angle on a color circle, with red at the top (0 degrees), green one-third of the way round the circle in clockwise
direction (120 degrees), and blue two-thirds of the way round (240 degrees). Saturation represents the intensity of
the color, making it duller or brighter. And lightness makes the color darker or lighter. See
www.w3.org/TR/css3-color/#hsl-color
for examples.
