RGBa CSS Generator for Internet Explorer

04 Dec 09

If you’ve been keeping up with how recent browsers have been implementing parts of the CSS3 spec, you may already be using RGBa to define semi-transparent background colors. You’d also know that this works in recent versions of Firefox and Safari, but not in any version of Internet Explorer.

There are, however, workarounds to get semi-transparent backgrounds working in IE. One such workaround utilizes a proprietary IE filter property, DXImageTransform.Microsoft.Gradient, but using it requires you to recalculate your RGBa value into a hex code formatted as #AARRGGBB, where the AA is the alpha value in hex format. The remaining RRGGBB value is standard hex code that is familiar to anyone who writes CSS.

I recently used this workaround for a new site I’m working on, but I found the task of converting an RGBa value to a #AARRGGBB hex value to be tedious to the point of being nearly inscrutable. So I did what any lazy programmer worth his salt would do: I put together the little tool you see below to automate this conversion and give the IE-specific CSS for any RGBa definition. Try it—just enter an RGBa definition like rgba(24,104,33,0.65) below and you’ll get the version of that code which IE will understand.

And that’s all there is to it. One important thing to note: be sure to put your IE-specific code in its own stylesheet and feed it to IE using conditional comments.

I’m sure I’ll find this tool useful in the near future. I hope you do too.