How to use RGBA + Examples

Today I wanted to talk about RGBA color a bit.  Before I launch off into the post I first want to note that this will not work in all browsers.  As RGBA is something for CSS3 you may want to check this chart to see if your browser of choice is supported.  RGB color is a way of displaying color other than using hex values.  With the CSS3 specification designers and developers get to take RGB one step further and define an alpha or transparency value.  RGBA is a great new way that CSS3 deals with transparency.

Here’s a quick example of defining a value to red in both hexidecimal values and RGB

em { color: #ff0000 }           /* #rrggbb */
em { color: rgb(255,0,0) }

There are several sites that already use RGBA to create some very interesting and dynamic effects.  24ways.org uses RGBA to create a layered overlapping effect.  Other examples such as Sam Brown's site uses RGBA to once again create a level of depth, and after glancing at the CSS Sam uses RGBA to change the alpha value of many of his various textual elements.  In addition Dan Cedarholm, who writes at simplebits.com, and who spoke about RGBA as well as other CSS3 features in his talk on Progressive Enrichment using CSS3 at FOWA last November, uses RGBA for some of the textual elements on his site as well.

Below is a small bit of code i put together just to show how RGBA can be used.  The page changes background color and alpha value when you mouseover the paragraph.

<html>
 <head>
 <style type="text/css">
 p {
 width: 300px;
 padding:15px;
 background: rgba(0, 0, 255, .5);
 }

 p:hover{
 background: rgba(0, 0, 255, .75);
 }
 </style>
 </head>
 <body>
 <p>This is a sample paragraph that shows how RGBA works.
 This is a sample paragraph that shows how RGBA works.
 This is a sample paragraph that shows how RGBA works.</p>    
 </body>
</html>

From my standpoint, the thing that I really like is the fact that by replacing a normal hex value with RGBA, I define a color just the same, however I’m also given the alpha value which seems as though it could be a jumping point to many great new uses.  I think I may be doing a few more posts in this style, so let me know what you think.  Hopefully this sort example helps, and don’t be afraid to leave a comment or reach out to me on Twitter.



This entry was posted on Wednesday, December 9th, 2009 at 2:14 pm and is filed under Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply