WORKING WITH COLOR VALUES - HTML5 - page 64

< h1 > Los Angeles Dodgers < br >
( Formerly of Brooklyn )</ h1 >
</ body >
</ html >

When you launch the page, the colors come out precisely as you instructed, as shown in
Figure 4-2.

Figure 4-2: Setting colors with RGB percentages.

68

A second way to assign colors using percentages is to use a hue-saturation-light (HSL) model.
h e big advantage of HSL is that lightness is symmetrical. h at makes it easier to tweak a
color to what you'd like it to be.

By thinking of a color circle arranged around 360 degrees like a compass, you select a hue. At
the top, or 0 percent, you i nd the reds. Moving clockwise, at 30 percent the hues turn
red-yellow. At 60 percent, they're yellow. And so on around the color spectrum until you're at
360 percent (0 percent) where you're back to the red hues. For designers who understand the
color spectrum, this makes choosing colors much easier. To create a lighter color, increase the
light value; decrease the light value to make the color darker. For example, suppose you're
trying to get just the right shade of red. You start with the following color assignment:

hsl ( 0 , 100 %, 50 %);

Notice that the i rst value is not a percentage. h at's because it has values between 0 and
359 — the 360 degrees of a circle. ( Remember: 0 and 360 are the same point on the circle.)
By raising and lowering the light (the third parameter), you can make your color lighter or
darker — which is far more intuitive than changing RGB percentages. h e following
HTML5/CSS3 script ( HSLColor.html in this chapter's folder at www.wiley.com/go/
smashinghtml5 ) shows how easy it is to lower and raise the light value to get just the right
shade of red.

<! DOCTYPE HTML >
< html >
< head >