CSS3

• Home / CSS3 Previews / RGBA colors

RGBA colors

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. This new feature allows us to specify an opacity value for a color. This one could
make life for webdevelopers a lot easier…

So far, this has only been implemented in Safari 3, and works in the latest Firefox 3 pre-alpha’s.

See the example:

See the difference in the code between the first row, which uses RGBA color values, and the second, which uses RGB values:

<div style="background: rgba(255, 0, 0, 0.2);"></div>
<div style="background: rgba(255, 0, 0, 0.4);"></div>
<div style="background: rgba(255, 0, 0, 0.6);"></div>
<div style="background: rgba(255, 0, 0, 0.8);"></div>
<div style="background: rgba(255, 0, 0, 1)  ;"></div>

And the second one:

<div style="background: rgb(243, 191, 189);"></div>
<div style="background: rgb(246, 143, 142);"></div>
<div style="background: rgb(249, 95 , 94) ;"></div>
<div style="background: rgb(252, 47, 47)  ;"></div>
<div style="background: rgb(255, 0, 0)    ;"></div>

Read here how RGBA differs from opacity.