# CSS3 `color: rgba()` or `color: hsla()` and CSS3 `opacity`

CSS3 has added a new feature to color setting. Next to rgb you can now also use rgba. The “a” in this property-name stands, for, you guessed it: alpha.

RGBa is a way to declare a color in CSS that includes alpha transparency support.

Some text

`background: rgba(255, 255, 255, .5) center center;`

The first three numbers represent the red, green and blue values and the last is the transparency from 0 (100% transparent) to 1 (no transparency). Below the alpha values go from .2 to 1 in .2 increments.

.2
.4
.6
.8
1

## RGBa is not opacity

When you use opacity property on an element, say `div { opacity: .9;}`, you set the opacity for that element and all of its children, everything contained by the box. So if you simply apply opacity to a div with a background-color of white, the text and images contained in that div will inherit the opacity property and they will also be transparent.

.2
.4
.6
.8
1

## HSLa

- Hue is derived from a degree on the color wheel: 0 & 360 being red, around 120 for the greens, 240 for the blues and everything else in between.
- Saturation is a percentage: 0% being grayscale and 100% in full color.
- Lightness is a percentage: 0% is dark, 50% the average and 100% the lightest
- alpha transparency

Hue, Saturation, Lightness (Brightness in Photoshop) is often an easier, more human way to determine color numbers for designers.

### Browser Support

Firefox 3+, Safari 3+, Opera 10, Google Chrome 1+, iPhone, Blackberry Storm

IE8 and below doesn't support the alpha in RGBa or HSLa, and color will be solid, except IE5.5 will have no color. (IE has a proprietary alpha filter that you can use in a conditional comment in the `<head>`.)

`<!--[if lt IE 8]>
<style type="text/css">
.transparent {
filter:alpha(opacity=50);
}
</style>
<![endif]-->`

IE8 and below do not support HSL color declaration, so you would have to either use a conditional comment for the color values in rgb or hex or a "fallback" declaration with rgb or hex colors.

If the design permits, you might declare a “fallback” color, using normal rgb or hex to define the property color and then declare the property again below it with rgba. This color will be solid. Not declaring a fallback means no color will be applied in browsers that don’t support it. This fallback does fail in some really old browsers.

`background: rgb(255, 255, 255);
background: rgba(255, 255, 255, .5) center center;`

### Tutorials:

http://forabeautifulweb.com/blog/about/is_css3_rgba_ready_to_rock/

http://www.css3.info/preview/rgba/

http://www.css3.info/introduction-opacity-rgba/

http://www.w3schools.com/Css/css_image_transparency.asp

### Examples:

http://forabeautifulweb.com/demo/2008/10/25/index.html

http://timvandamme.com/ networks navigation hover and active have different alpha on background color and also use transition.