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

Welcome Section

Here you put the link to the RSS feeds, link to contact information and maybe a link to the about section.

Social Networking

• 
• 

DaBrook Tweets

• Speak to high school students about the web and get one of these from @mrjbrown http://bit.ly/bv3ib8 (03-12 11:55)
• @phil_interact International web student conference tour. That would be amazing! I wonder what form I have to fill out for that trip? (03-11 5:21)
• Extended office hours during mid term - http://eepurl.com/jn8q (03-11 4:40)
• I don't know ... is a field trip to London possible? http://bit.ly/a2K8Mu (03-11 1:37)
• Springbrook web 1 students are learning HTML forms today http://bit.ly/aue1mi (03-11 8:07)

Google DaBrook:

What's current:

• Web Design: Design Round #2 Critiques
• Web Development: Get blog entry’s to add to database
• ITGS: Review Justin’s ITGS Project