116 Chapter 10
In this example, browsers that don’t support RGBA values ignore
the second color property and apply the first color property. Of course,
this result means that a fully opaque color will be used instead of a semi-
opaque one, so check your design thoroughly to make sure it isn’t negatively
affected.
The same goes for all new color values introduced in the rest of this
chapter.Hue, Saturation, Lightness
I mentioned earlier in the chapter that CSS3 brings a new notations sys-
tem for color, and that system is known as HSL. Summing up exactly what
HSL is without providing a course in color theory is hard, but I’ll do my
best: HSL—which stands for Hue, Saturation, Lightness (sometimes called
Luminance)—is a cylindrical-coordinate representation of color space. Still
not clear? Take a look at Figure 10-4.Figure 10-4: The HSL color notation method^1All the possible colors are arranged in a cylinder with a central axis. The
angle around the axis is the hue; the distance from the axis is the saturation;
and the distance along the axis is the lightness. The combination of those
three values creates a unique color.
Hue represents the major colors, starting and ending with red (0 or
360) and including all the main colors between. Think of the colors of
the visible spectrum (or the colors of the rainbow) you learned about in
school—red, orange, yellow, green, blue, indigo, and violet—arranged
around the circumference of a circle; the value of hue is a degree around
that circumference that points to a specific color.- This image is taken from Wikimedia (http://en.wikipedia.org/wiki/File:HSL_color_solid_cylinder
_alpha_lowgamma.png) and is published under a Creative Commons Attribution license.