HTML and CSS Reference

In-Depth Information

Hexadecimal notation is mathematically equivalent to the integer-pair notation dis-

cussed in the previous section. For example,
rgb(255,255,255)
is precisely equivalent

to
#FFFFFF
, and
rgb(51,102,128)
is the same as
#336680
. Feel free to use whichever

notation you preferâ€”it will be rendered identically by most user agents. If you have a

calculator that converts between decimal and hexadecimal, making the jump from one

to the other should be pretty simple.

For hexadecimal numbers that are composed of three matched pairs of digits, CSS

permits a shortened notation. The generic syntax of this notation is
#RGB
:

h1 {color: #000;} /* set H1s to black */

h2 {color: #666;} /* set H2s to dark gray */

h3 {color: #FFF;} /* set H3s to white */

As you can see from the markup, there are only three digits in each color value. How-

ever, since hexadecimal numbers between
00
and
FF
need two digits each, and you have

only three total digits, how does this method work?

The answer is that the browser takes each digit and replicates it. Therefore,
#F00
is

equivalent to
#FF0000
,
#6FA
would be the same as
#66FFAA
, and
#FFF
would come out

#FFFFFF
, which is the same as
white
. Obviously, not every color can be represented in

this manner. Medium gray, for example, would be written in standard hexadecimal

notation as
#808080
. This cannot be expressed in shorthand; the closest equivalent

would be
#888
, which is the same as
#888888
.

There is no hexadecimal notation that includes alpha values.

Colors by HSL and HSLa

New to CSS3 (though not to the world of color theory in general) are HSL notations.

HSL stands for
H
ue,
S
aturation, and
L
ightness, where the hue is a hue angle in the

range 0-360, saturation is a percentage value from 0 (no saturation) to 100 (full satu-

ration), and lightness is a percentage value from 0 (completely dark) to 100 (completely

light).

The hue angle is expressed in terms of a circle around which the full spectrum of colors

progresses. It starts with red at zero degrees and then proceeds through the rainbow

until it comes to red again at 360 degrees.
Figure 11
illustrates this visually by showing

the angles and colors of the spectrum on a wheel as well as a linear strip.

If you're intimately familiar with RGB, then HSL may be confusing at first. (But then,

RGB is confusing for people familiar with HSL.) You may be able to better grasp the

hues in HSL by contemplating the diagram in
Figure 12
, which shows the spectrum

results from placing and then mixing red, green, and blue.