CSS 3 RGB RGBA Color Opacity

A guide to using css3 ‘RGB’ & ‘RGBA’, giving us not only the ability to set RGB color/colour but also apply a level of opacity.

The HSL declaration sets color/colour using Red (R), Green (G) and Blue (B).

CSS 3 RGB


The above RGB example uses the following CSS 3

  1. CSS 3 RGB
  2. div.L1 { background:rgb(60, 80, 100); height:20px; }
  3. div.L2 { background:rgb(60, 100, 100); height:20px; }
  4. div.L3 { background:rgb(60, 120, 100); height:20px; }
  5. <br />
  6. div.L4 { background:rgb(25, 50, 100); height:20px; }
  7. div.L5 { background:rgb(25, 50, 150); height:20px; }
  8. div.L6 { background:rgb(25, 50, 200); height:20px; }
 

CSS 3 RGBA

Alpha allows us the ability to set a level of opacity. An element with opacity/alpha value of 1.0 will be fully opaque (visible) while an element with opacity value 0.0 will be the complete opposite, invisible. Any value inbetween will determine how opaque (or transparent) the color or object is against its background.

The above RGBA example is set in another layer containing a background texture and each layer uses the following CSS 3

  1. CSS 3 RGBA
  2. div.L1 { background:rgba(153, 134, 117, 0.2); height:20px; }
  3. div.L2 { background:rgba(153, 134, 117, 0.4); height:20px; }
  4. div.L3 { background:rgba(153, 134, 117, 0.6); height:20px; }
  5. div.L4 { background:rgba(153, 134, 117, 0.8); height:20px; }
  6. div.L5 { background:rgba(153, 134, 117, 1.0); height:20px; }
 

The Zen Elements CSS3 Series

Thank you for reading!
@zen