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.

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

Back to CSS Colors »