CSS3 RGBA color opacity

May 30th, 2010 by JorisO | Filed under CSS3.

In CSS 3 the RGB color model has been extended to include an alpha value, thus becoming an RGBA color model. The alpha value sets the opacity of the color specified by the Red Green Blue combination specified before it.

RGBA specification

Unlike RGB values there is no hexadecimal notation available for the RGBA values. The alpha / opacity value has to be specified as last argument to the rgba specification of the color which works similar to the older rgb() specification:

em { color: rgb(255,0,0) }
em { color: rgba(255,0,0,1)}

The alpha is the last value between the brackets and ranges from 1 (fully opaque) to 0 (fully transparent).

A few examples:
This is RGBA color text
This is also RGBA color text
This is also RGBA color text 

em { color: rgba(255,0,0,0.2)}
em { color: rgba(255,0,0,0.5)}
em { color: rgba(255,0,0,0.9)}

Browsers support for RGBA


One Response to “CSS3 RGBA color opacity”

  1. A Python Implementation of the Alpha Blending Algorithm says:
    June 7, 2010 at 6:43 AM

    [...] The only problem I have with CSS3 is that the specification is still far from complete — I believe predictions are that the specification will only be fully complete in 2012 or something. As such, some new features of CSS3, including RGBA colors, are only supported in the latest versions of major browsers. [...]

    Reply

Leave a Reply