Chapter 3Figure 3-3. The 24 Ways website uses overlapping elements and translucent RGBA colorsHSL
The HSL color model expresses a color by three factors: hue, saturation, and lightness. A color’s hue is
represented by the color’s angle on a color wheel, beginning and ending with red (so both 0 and 360 are
red). The angle of a radius drawn on that color wheel represents a different color. Green has an angle of
120 degrees, blue is at 240 degrees, and every other color falls somewhere else around that spectrum
wheel. Yellow is 60 degrees, cyan is 180 degrees, and 295 degrees is a sort of purplish pink, part way
between blue and magenta.
The color’s saturation is a measure of its intensity, expressed as a percentage between 0% (no color) to
100% (full intensity). The color’s lightness is its value or brightness, also a percentage between 0%
(completely dark) to 100% (full brightness). Once you form a mental picture of the color wheel, declaring
colors in HSL is really very intuitive, and much more naturalistic than RGB or hexadecimal. You can just
think of a color—a dark greenish-teal of medium brightness, perhaps—and even without using a color
picker, you can write it out in HSL and probably get something pretty close to the color you want:
.villain { color: hsl(155,55%,40%); }