CSS3: rgba color values!

January 14th 2010

RGBA actually stands for (R)ed (G)reen (B)lue (A)lpha and is used to define colors in your CSS. As you must already know, colors are composed of various amounts of red, green and blue to form the final color. In CSS you can now specify the opacity of the desired color, that’s what the alpha channel is for.

What does that mean?

Up until now, the only way we had to add opacity to an element was to use the opacity CSS property. While it’s working totally fine, the opacity is also applied to all the children of that element, so this solution is not really appropriate if you just want a transparent background on a container.

Take a look at the following demo page to see how RGBA and opacity reacts differently.

Another way would be to use transparent PNGs and use them as background images to achieve the desired effect, but then again it’s not the clean way of doing this and PNG support in IE6 is far from being good.

Now you can simply add opacity to the color of your background by defining the background color like so:

#container {
  background: rgba(255,0,0,0.2);
}

The values are the following:

  1. Red color value
  2. Green color value
  3. Blue color value
  4. Alpha value, from 0 (transparent) to 1 (opaque).

Real world usage

As always with CSS3, you need to be careful on how you use it. If opacity on an element is not a major aspect of your design but a nice to have, you can consider RGBA. If your design rely on opacity to look nice, then you’ll have to look at other solutions.

What about degradation?

As you might expect, RGBA is not supported in any current version of Internet Explorer but it’s working as intended in the lastests versions of Chrome, Firefox, Safari, Opera, etc. To ensure at least everyone is able to see a solid background color, you must declare the properties as follow:

#container {
 background: rgb(255,0,0); /* For IE and older browsers */
 background: rgba(255,0,0,0.2);
 }

So when a browser sees the first value, it’ll apply it to the element, if it supports RGBA, it’ll override the first declaration with the second one. This way you’re sure everyone will at least see a solid background.

Leave a Reply