RGBA Colors

What the heck are RGB Colors? Many of you are already familiar with RGB color values, they are the Red Blue Green values sometimes used in place of the more familiar hexadecimal values. While hexadecimal values use the numerals from 0 - 9 and the letters A-F, RGB values use only numerals from 0 - 255. For example, if you would use hexadecimal to denote the color red you would use color:#FF0000; but in RGB it would be color:rgb(255,0,0); instead. It's just another way to specify a color value.

So what's the new "A" at the end? That stands for the alpha channel, the technical term for the layer which contains the opacity information for the specified color. This enables you to render the color itself opaque without having to use any other opacity codes. The higher the number the more opaque (solid) the color, the lower the number the more transparent the color will be. This differs from using a color plus an opacity because this method affects only the color itself. For example, to color any specific selector with a translucent background color you'd use a color as a background then add opacity:0.5; or similar but that would cause everything in the selector to be semi-opaque including the content. Use of RGBA color values would render only the color itself semi-transparent, not the content.

So how do you use it? First, you add an "a" to "rgb" when expressing the color value then you add a value to the color code to define the level of opacity. The scale is 0 - 1 just like the standard opacity property, and the number is added to the RGB color value as if it were another value. So if you wanted to make color:rgb(255,0,0); halfway transparent you would use color:rgba(255,0,0,0.5); which is 255 red, 0 blue, 0 green, with 0.5 opacity. Below are some rather ugly examples using a red text highlight over a patterned blue background, note that the red gets more translucent but the font does not..

Does this work in all browsers? You can use this anywhere you'd use a color value; as a background color, a font color, a border color, box shadow color, etc... Browser support is limited to IE9+, Firefox 3+, Chrome, Safari and Opera 10+, basically anything current. According to the rules browsers are supposed to follow, any older browser which doesn't recognize RGBA colors will not just read the first three values to obtain the color then skip the opacity value, it will instead skip the entire declaration resulting in no color. I believe you can get around this by using a standard color value first then adding a second color property:value; for the rgba color. Older browsers should render the first one and ignore the rgba. I have only been able to test this theory with IE8, with successful results. You'll know your browser is incompatible if you do not see the the red backgrounds above. If it works anyone could use RGBA without worrying about browser compatibility, anything incapable of rendering it would still show a color. Example:

.selector {
background-color:rgb(255,0,0);
background-color:rgba(255,0,0,0.6);
}

Older browsers should read the first color, then skip the second because they don't recognize it. The background color would still be red. Compatible browsers will read the first value, then read the second which will override the first, giving you a semi-transparent color.