The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

Color and Opacity 117

Saturation is the strength or intensity of that color: 0 percent is zero

intensity, which makes the color a shade of gray, and 100 percent is full

strength, the most intense version of that color.

Lightness is the brightness or darkness of the color: 50 percent is the

true color, 0 percent is black, and 100 percent is white.

If you’ve never encountered HSL before and my explanation has still

left you baffled, don’t worry—for our purposes, you just need to understand

that HSL is applied with the hsl() color value function. It takes three argu-

ments, with a similar syntax to rgb():

E { color: hsl(hue,saturation,lightness); }

The hue value is a number between 0 and 360 (the degrees around the

hue wheel), and saturation and lightness accept values from 0 percent to

100 percent. Some simple color examples with their hexadecimal and RGB

equivalents are shown in Table 10-1.

table 10-1: Common Color Equivalents for Four Color Values

hsL rGB hexadecimal Keyword

0,0%,0% 0,0,0 #000000 black

360,0%,100% 255,255,255 #FFFFFF white

0,100%,50% 255,0,0 #FF0000 red

120,100%,25% 0,128,0 #008000 green

240,100%,50% 0,0,255 #0000FF blue

noTe Even if you are using a 0 (zero) value for saturation and lightness, you must still
specify the value as a percentage.

Table 10-1 doesn’t actually tell the whole story—many different com-

binations of values allow you to create pure white, for example. Really, the

best way to learn more about HSL is to get a color picker that supports

it and play around for a while. Photoshop and most other graphics pack-

ages have an HSL color picker, and you should also be able to find color

conversion tools online. Be careful, however, not to confuse HSL with Hue,

Saturation, Value (HSV)—although they use an identical syntax, the color

values are mapped differently so you will not get the same results.

The advantage of HSL over RGB (or hexadecimal) is that it allows you

to try different variants of a color more quickly, such as making a certain

color lighter/darker or more/less intense. The flexibility of HSL makes

it more useful for web designers. If you’re a developer coding from other

people’s designs, however, you may want to continue using RGB. HSL is

simply a new alternative to consider.