HTML and CSS Reference
In-Depth Information
As for the other two values, saturation measures the intensity of a color. A saturation
of
0%
always yields a shade of gray, no matter what hue angle you have set, and a
saturation of
100%
creates the most vivid shade of that hue for a given lightness. Simi-
larly, lightness defines how dark or light the color appears. A lightness of
0%
is always
black, regardless of the other hue and saturation values, just as a lightness of
100%
always
yields white. Consider the results of the following styles, illustrated on the left side of
Figure 13
.
p.one {color: hsl(0,0%,0%);}
p.two{color: hsl(60,0%,25%);}
p.three {color: hsl(120,0%,50%);}
p.four {color: hsl(180,0%,75%);}
p.five {color: hsl(240,0%,0%);}
p.six {color: hsl(300,0%,25%);}
p.seven {color: hsl(360,0%,50%);}
Figure 13. Varying lightness and hues
The gray you see isn't just a function of the limitations of print: every single one of
those bits of text is a shade of gray, because every color value has
0%
in the saturation
(middle) position. The degree of lightness or darkness is set by the lightness (third)
position. In all seven examples, the hue angle changes, and in none of them does it
matter. But that's only so long as the saturation remains at
0%
. If that value is raised to,
say,
50%
, then the hue angle will become very important, because it will control what
sort of color you see. Consider the same set of values that we saw before, but all set to
50%
saturation, as illustrated on the right side of
Figure 13
.
It can be instructive to take the 16 color keywords defined in HTML4 (
Table 1
) and
plot them against a hue-and-lightness wheel, as shown in
Figure 14
. The color wheel
not only features the full spectrum around the rim, but also runs from 50 percent light-
ness at the edge to 0 percent lightness in the center. (The saturation is 100 percent
throughout.) As you can see, the twelve keywords of color are regularly placed through-
out the wheel, which bespeaks careful choice on the part of whoever chose them. The
gray shades aren't quite as regularly placed, but are probably the most useful distribu-
tion of shades given that there were only four of them.
