THE (NEAR) FUTURE - CSS: Professional Techniques for Modern Layout - page 246

RGBA colors can be used with any property that accepts a color value, such as color and
background-color . To keep older browsers from puking on themselves, it's advisable to
supply a non-alpha color before the alpha color. h at would take a form like so:

{ color : #000 ; color : rgba(0,0,0,0.75) ;}

h e older browsers see the i rst value and know what to do with it. h en they see the second
value and don't know what to do with it, so they ignore it. h at way, at least older browsers get
black text. Modern browsers, on the other hand, understand both values and thanks to the
cascade, override the i rst with the second.

Note that there is no hexadecimal form of RGBA colors. h us, you cannot write #00000080
and expect half-opaque black.

HSL AND HSL ALPHA COLOR
A close cousin to RGBA values are the HSLA values, and an even closer cousin to them are
HSL colors. h ese are new to CSS 3, and will be a delightful addition to many designers.

For those not familiar with HSL, the letters
stand for Hue-Saturation-Lightness. Even if
you didn't know the name, you've probably
worked with HSL colors in a color picker
such as that shown in Figure 7-18.

248

Figure 7-19 represents a few tables to give an
idea of how the various pieces of HSL work
together.

h e hue is represented as a unitless number
corresponding to the hue angle on a color
wheel. Saturation and lightness are both
percentages, and alpha is (as with RGBA) a
number between 0 and 1 inclusive. In
practice, you can use HSL colors anywhere a
color value is accepted. Consider the follow-
ing rules, which create the equivalent ef ect to that shown in Figure 7-17 (as demonstrated by
Figure 7-20).

Figure 7-18: An HSL color picker.

.box1 { background : hsl(0,0%,100%) ;}
.box2 { background : hsla(0,0%,100%,0.5) ;}

You can do old-browser fallbacks with regular RGB values, though having to specify an RGB
color and then HSL color does sort of detract from the point of using HSL in the i rst place.
HSL allows you to get away from RGB altogether.