The Introduction of an Alpha Channel

CSS3 brings us an awesome new channel to our previous RGB and HSL color schemes; An alpha channel.

Prior to CSS3 the only option we had for controling alpha was the opacity attribute (or opacity filter in IE). The major problem with this being that even the content of the element it was assigned to took on that opacity level.

For animations and UI effects, this was fine, but if you were only attempting to make the background transparent this didn't bode too well. We now have a much finer-grain control over how we assign opacity/alpha.

So far the only downfall is Internet Explorer's lack of support. Grrrr....

A quick comparison

Both elements have a pure black text color, and a pure blue(rgba = 0, 0, 255) background color. The difference is the div on the left uses opacity for altering the alpha of the element, whereas the element on the right uses the rgba() value for the background-color attribute.

CSS3 usages

Both RGBA and HSLA can be used for nearly all attribute values. Border colors, background colors, foreground (font) colors, etc.

It's the "A" in both RGBA and HSLA that are new in CSS3. Valid values work the same as they do for opacity; values 0.0 - 1.0 are valid.

RGB and RGBA

Your basic Red, Green, Blue, and now Alpha! If RGB needs to be explained to you, perhaps you should do a quick Google search before continuing on.

Simply add a fourth value between 0.0 and 1.0 to the rgba() attribute value in order to use the alpha channel!

For now best practice is to first declare an initial value for browsers (IE!) that don't yet support RGBA so that they are not simply colorless.

/* First Element */
background: rgb(0,0,255); /* needed for graceful degradation (IE! Grrrr) */
background-color: rgba(0,0,255,0.4);

/* Second Element */
background:rgb(0,0,255); /* needed for graceful degradation (IE! Grrrr) */
background-color: rgba(0,0,255,0.4);
background-image: -moz-linear-gradient(top, rgba(255,255,255,0.1), rgba(0,0,0,0.2));
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.3)), to(rgba(0,0,0,0.4)));

HSL and HSLA

HSL and HSLA are absolutely amazing. HSL (Hue Saturation Lightness) is a much more intuitive method for defining colors, in my opinion.

You can think of it like this:

• H (Hue): Derived from the degree the color is located at on the color wheel. 0 and 360 are red, 120 is green, and 240 is blue.
• S (Saturation): Determines the saturation level of the afore-mentioned color in percentages. 0% being completely devoid of color, 100% being full color (meaning white). 50% will give you the "true" color.
• L (Lightness): Again determines the level of lightness/darkness of the hue and also in a percentage. 0% is the darkest value, and 100% is the lightest.
• A (Alpha): Simply a 0.0 to 1.0 value same as with RGBA with 0.0 meaning no visibility, and 1.0 meaning full visibility.

/* First Element */
background: blue; /* needed for graceful degradation (IE! Grrrr) */
background: hsl(240, 100%, 50%);
background-color: hsla(240, 100%, 50%,0.4);

/* Second Element */
background: blue; /* needed for graceful degradation (IE! Grrrr) */
background: hsl(240, 100%, 50%);
background-color: hsla(240, 100%, 50%,0.4);
background-image: -moz-linear-gradient(top, hsla(0,100%,100%,0.3), hsla(0,0%,0%,0.5));
background-image: -webkit-gradient(linear, left top, left bottom, from(hsla(0,100%,100%,0.3)), to(hsla(0,0%,0%,0.5)));