HTML and CSS Reference
In-Depth Information
Figure 4-2
The position of the main colors on a color wheel.
Assuming you want a red color, you choose the hue value 0 or 360.
Next, you choose the saturation value, which is a percentage value. The higher the value, the brighter the color of red
you get.
Finally, you can increase the red color's lightness using a percentage value again. Using 0% makes the color com-
pletely black, whereas 100% makes it completely white.
HSL might not sound that intuitive, but unlike RGB, it allows you to select a base color quicker and then tweak it to
your needs.
Much like RGBA, an HSLA function also exists; it allows you to change the opacity of a color by using the alpha ar-
gument—a decimal value between 0 and 1, 0 being transparent, 1 being opaque.
Again, because HSL is implemented only in modern browsers, you need to add a declaration that older browsers can
understand, like so:
body {
background-color: #f5f5f5;
background-color: hsl(0, 0, 0.961);
}
This approach is rather convoluted, though. The purpose of using HSL is to make choosing colors easier. Because
older browsers require a color property they understand, you would have to go to the effort of using a color picker to
determine the hexadecimal equivalent of the HSL value, defeating its purpose. Because of this, I recommend you
stick with using the RGB property instead; you need to use a color picker either way!
