RGBA Examples

Back to CSS Colors »

RGBA Examples

Below is an example of the following color declarations:

Inline styles are for demonstration only.

<ul> <li style="background-color: rgba(255, 0, 0, 1)"></li> <li style="background-color: rgba(255, 0, 0, .9)"></li> <li style="background-color: rgba(255, 0, 0, .8)"></li> <li style="background-color: rgba(255, 0, 0, .7)"></li> <li style="background-color: rgba(255, 0, 0, .6)"></li> <li style="background-color: rgba(255, 0, 0, .5)"></li> <li style="background-color: rgba(255, 0, 0, .4)"></li> <li style="background-color: rgba(255, 0, 0, .3)"></li> <li style="background-color: rgba(255, 0, 0, .2)"></li> <li style="background-color: rgba(255, 0, 0, .1)"></li> </ul>

Here are the exact same colors, except on a blue background.

Using Transparency with text

One use of RGBA colors is to allow for a subtle blending of type to the background color. The example below uses a slight transparency on a black headline. Notice how the type takes on the tone of the background.

irure dolor ipsum irure dolor ipsum irure dolor ipsum irure dolor ipsum

The headlines below just have the color set as plain black.

irure dolor ipsum irure dolor ipsum irure dolor ipsum irure dolor ipsum

Back to CSS Colors »

Tag » Color Rgba(0 0 0 .9)