WORKING WITH COLOR VALUES - HTML5 - page 65

< style type = ”text/css” >
. redBase {
color : hsl ( 0 , 100 %, 50 %);
}
. redDarker {
color : hsl ( 0 , 100 %, 25 %);
}
. redLighter {
color : hsl ( 0 , 100 %, 75 %);
}
</ style >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > HSL Color Assignment </ title >
</ head >
< body >
< h1 class = ”redBase” > Red Base </ h1 >
< h1 class = ”redDarker” > Red Darker </ h1 >
< h1 class = ”redLighter” > Red Lighter </ h1 >
</ body >
</ html >
When i rst using HSL, it helps to think of adding light by going higher to the sun or making it
darker by going lower into a well. h e tweaking process is easier for designers to get just what
they want. Figure 4-3 shows what the dif erent red tints look like.
69
Figure 4-3: HSL makes tweaking tints easy.
Hue and light are fairly intuitive to understand, but saturation can be a little murky. Essen-
tially, saturation is the amount of colorfulness in a given color. A 100 percent saturation is the
full colorfulness of a hue in a given light, while a lower percent subtracts from a hue — some-
thing like a color fading. For all colors, a midpoint light is going to be gray when saturation is
0 percent. Sometimes a faded or muted color is preferred, like blue jeans that have been
washed many times.