Time to Make the Switch from Hexadecimal to CSS3 RGBa

06.23.2009

This last semester, Jason Cranford Teague came to speak to my students Springbrook web design students.  One of the things he talked about was how he encouraged web designers to work with RGB instead of hexadecimal because it crossed the graphic designer / web designer divide more smoothly and related more to the standard used in the art industry.  He also felt is was much more intuitive for students to learn than hexadecimal, which many very talented web designers probably don’t fully understand.

While I supported his ideas, it wasn’t enough for me to switch myself or teach my students to use RGB instead of hexadecimal.

What makes it worth the switch, in both my practice and teaching is CSS3’s support of RGB alpha transparency.  Alpha transparency allows you to set the opacity for color.  Huge!  Browsers that support this will display the background (or font) color with the set level of opacity while not effecting the layers on top of it. 

//Background color with hexadecimal
#header {background-color: #000;}

//Background color with RGB
#header {background-color: rgb(0, 0, 0);}

//Background color with RGBa
//This example will have a 50% opacity black background color
#header {background-color: rgba(0, 0, 0, .5);}

In the past you had to do a fairly heavy workaround to get just the background color to be opaque without affecting the text as well.  Alpha transparency makes this much easier.

Browsers that do not support alpha transparency will still display the color without the transparency. Current versions of Firefox, Safari, Opera, and Chrome support RGBa.  IE doesn’t.

Students still have to know what hexadecimal is and how to use it since it is still the standard, but I think that I will begin teaching RGBa as a best practice.  Is it to early to make this switch in webucation?

Comments

• 
• 
•