Values, Units, and Colors - Values, Units, and Colors - page 21

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.