Browser

How to use the RGBa color model

Ryan Boudreaux illustrates the RGBa color model and shares the fallback for the IE browser.

RGBa is a way that color gets declared in CSS3 and it includes the red, green, and blue channels of the color model, along with the alpha channel for transparency settings which enables alpha blending and compositing. The alpha channel sets the opacity, or transparency value of the pixel value. An alpha value of 1 sets the channel to fully opaque, while a value of 0 sets the channel to fully translucent or fully transparent. According to the W3C specification for PNG Data Representation, the alpha channel is really the degree of opacity of the pixel, but most people refer to alpha as providing transparency information, not opacity information.

Simple RGBa example

An example of an RGBa style property would look something like this:

.bg_sample3 {
   background: rgba(121, 7, 242, 0.25);
}
And this CSS style code snippet above displays a shade of purple as shown in Figure A (Chrome 20.0 is the browser used for these figures):

Figure A

The following display in Figure B demonstrates five quick samples of the same color with varying alpha levels:

Figure B

Fun with RGBa

The real fun with manipulation of the RGBa color model starts when you layer several defined properties, creating some interesting effects on your web pages. The example below demonstrates three boxes with individually defined RGBa properties, and their overlapping transparencies combine to create an interesting color combination.

The following properties are defined in the styles for the three boxes:

.box_1 {
      background: rgba(9, 53, 135, .5);
      width:250px;
      height:250px;
      margin-top:50px;
      padding:2px;
}
.box_2 {
      background: rgba(17, 191, 083, .25);
      width:250px;
      height:250px;
      margin-top:-200px;
      margin-left:50px;
      padding:2px;
}
.box_3 {
      background: rgba(227, 188, 32, .15);
      width:250px;
      height:250px;
      margin-top:-200px;
      margin-left:100px;
      padding:2px;
}
The example of three boxes overlapping each other with a different RGBa property respectively, is displayed in Figure C:

Setting a hover RGBa color change

Taking it a step further, how about we set a particular element to change the background color upon hover? In this example, we will set any list item with a defined style property as shown in the CSS snippet below:

 li {
      background: rgba(227, 188, 32, .15);
      width:155px;
      padding:2px;
}
li:hover {
      background: rgba(171, 83, 10, .75);
}
The first list item displays with the original defined background color, then the second list item on hover displays the resulting RGBa background color as shown in Figure D:

You can also assign the RGBa styling as inline styles, as in the example HTML code shown below:

<div style="background: rgba(11,156,49,0.2);">rgba(11,156,49,0.2)</div>
<div style="background: rgba(11,156,49,0.4);">rgba(11,156,49,0.4)</div>
<div style="background: rgba(11,156,49,0.6);">rgba(11,156,49,0.6)</div>
<div style="background: rgba(11,156,49,0.8);">rgba(11,156,49,0.8)</div>
<div style="background: rgba(11,156,49,1);">rgba(11,156,49,1)</div>
The code above displays the spectrum of RGBa colors in Figure E:

Fallback for IE

For IE the alpha channel is not recognized, so a fallback means you have to normalize the alpha channel to the setting you want for each of the color channels. There are several ways to convert the RGBa color channels to RGB color channels using algorithms and fancy calculations; however, my quick cheat is to just use the color picker in PhotoShop to find the RGB color channel properties of the resulting display, as shown in Figure F.

The following are the converted values for each instance of the partial green spectrum listed below:

rgba(11,156,49,0.2) converts to rgb(205,234,212)

rgba(11,156,49,0.4) converts to rgb(156,214,171)

rgba(11,156,49,0.6) converts to rgb(107, 194, 130)

rgba(11,156,49,0.8) converts to rgb(58, 174, 89)

And of course the last rgba(11,156,49,1) is set to full opacity, therefore the only change for the fallback is to remove the alpha channel and is represented as rgb(11, 156, 49). And the fallback as displayed in IE 8 is shown in Figure G:

The example index.html and styles.css files are included in the download.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

2 comments
Slayer_
Slayer_

If enough pages don't work in IE, Microsoft may finally start to fix it.

old graham
old graham

Now all I want is someone to commission a site from me so that I can use this... and a guarantee that all browsers will support it.

Editor's Picks