RGBa & HSLa CSS Generator for Internet Explorer

04 Dec 09

Update! – The generator now converts HSLa values as well as RGBa. Many thanks to Michael Jackson for making sense of the algorithm to convert HSL to RGB.

If you’ve been keeping up with how recent browsers have been implementing parts of the CSS3 spec, you may already be using RGBa or HSLa 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 or HSLa 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 or HSLa definition. Try it—just enter an RGBa definition like rgba(24,104,33,0.65) or hsla(248,65%,20%,0.4) 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.

Comments

Jim says:
8 January 2010 ∞

Only for 7 or later?
6 does not support? or “supports normal”?

James Seymour-Lock says:
4 March 2010 ∞

Great tool, really helps speed up the whole process! Many Thanks

Björn Rixman says:
22 March 2010 ∞

Great idea, but for it to work in IE8, don’t you need to add one more line, but where filter is prefixed with -ms-? like so:
-ms-filter:progid:DXImageTransform … etc etc.

I’ve been using it on a recent project and couldn’t get it to work without having two declarations.

Björn Rixman says:
24 March 2010 ∞

Oh, that’s right, I totally forgot to mention the quoted values…

christofer pak says:
12 April 2010 ∞

super nifty! great job!

zarko says:
23 April 2010 ∞

Thanx a lot! It helps me!

mic says:
19 May 2010 ∞

You’re much better off using a semi-transparent png, and use that as background image. Works with all browser as of IE6, no conditional CSS needed. And for IE6 you can use the PNG hack, which greatly reduces impact for the rest of your CSS.

Michael Bester says:
21 May 2010 ∞

@mic – Care to explain exactly why you’re “much better off” using a semi-transparent png? You have an extra resource to download, and you still need to do conditional CSS to make that work properly in IE6.

susan ohtake says:
25 May 2010 ∞

Thanks for this!
Might also be helpful to note that it only works only on class definitions…it will not work if you try to apply it to an ID. I wracked my brain for hours trying to figure that one out ;-)

Private Facebook says:
5 June 2010 ∞

I think mic is a bit confused judging by his reply

Zoe Gillenwater says:
18 June 2010 ∞

Very cool! What would it take to convince you to make an HSLA one? :-)

Tom B says:
23 June 2010 ∞

if you use it in a :hover it causes a weird flicker effect :(

Craig says:
26 June 2010 ∞

Wonderful. This saved quite a bit of time.

Much obliged!

the future says:
6 July 2010 ∞

Saved me a lot of time too. Thanks for the article.

Zoe Gillenwater says:
7 July 2010 ∞

Awesome, thanks so much for adding the HSLA option. But, strangely, now I can’t get it to work at all. I put in an HSLA value, push Enter, click into the IE value box — nothing happens. I’m sure I’m doing something wrong…Could you clue me in?

mato848 says:
12 July 2010 ∞

That just awesome tool , you made my life easier :)

Retheesh Gopi says:
24 July 2010 ∞

Hey man..its coool, really wonderful, i was searching this for a loong time…. thanx buddy…really super….congrats

shoebappa says:
19 August 2010 ∞

What a time saver, thanks!

tdskate says:
25 August 2010 ∞

Nice little tool.

Can you make something like this that converts box-shadow properties to an IE filter?

Zoe Gillenwater says:
27 August 2010 ∞

Cool, fixed now! I discovered that it doesn’t like it if you don’t have a zero in front of the decimal in the opacity level, such as hsla(182,44%,76%,.5), but that’s not a big deal. Thanks again for this great tool!

me says:
4 September 2010 ∞

thank you!

Scott Silvi says:
13 September 2010 ∞

Very useful converter – definitely bookmarked this tool!

Marco says:
13 September 2010 ∞

Thank you so much!
Microsoft sucks!

Johannes Gorset says:
14 September 2010 ∞

This is a great tool. Thanks!

Scott says:
30 September 2010 ∞

Excellent tool, but I was pulling my hair out trying to get it to work in IE8. It turns out that zoom: 1 no longer forces hasLayout. I was able to get it to work by specifying display: inline-block

Natasha says:
6 October 2010 ∞

OMFG, you just saved my life.
Thank you thank you thank you!

Dan Tello says:
22 October 2010 ∞

Thanks for this. I just used it to fix the infamous ie8 black border around pngs when fading with jQuery. Just give the image tag the following:

background: transparent; -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)”; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */ zoom: 1;

Presto! Goodbye black, and hello working alpha channel.

diegoo says:
11 November 2010 ∞

You have saved me, I was working on this site http://www.ver-art.net/en and I thought I would have to hardcode every single one of the transparencies….. so, most of the site.

Love you man, you are the Jesus of CSS

schmelik says:
18 November 2010 ∞

@ Dan Tello
This does work with gradient png backgrounds with jquery effects. the only issue I get now is text, input fields are also transparent and see right through to the what is below it.

any ideas?

Donjo says:
1 December 2010 ∞

Found a free app for windows that does the same thing plus shows a CSS preview of the alpha gradient
http://wstudios.com/colorpicker/

Salman Abbas says:
20 January 2011 ∞

@Jim IE6 doesnt support transparent images

Martiinkolle says:
25 January 2011 ∞

Thanks for sharing. This is great!! :D

Josan says:
26 January 2011 ∞

Thanks! Great!

Dennis says:
8 February 2011 ∞

Thanks for this…saved me headaches

Zequez says:
15 February 2011 ∞

Thanks! Very useful! ^^

nour says:
10 March 2011 ∞

Good & Thanks

Daniel Campo says:
17 March 2011 ∞

Thanks, Michael! This is a great little tool to save time.

PHPLAW says:
22 March 2011 ∞

IE9 Support plz :D

Gig says:
22 March 2011 ∞

Nice Job, man!
Thanks very much!

Marc says:
2 May 2011 ∞

SASS @mixin
almost gives the same answers as this site…

// [email protected]
$number-to-hex-hexes: 0 1 2 3 4 5 6 7 8 9 A B C D E F;

function number-to-hex($number, $width: 2) { $s: nth($number-to-hex-hexes, ($number % 16) + 1);if $width > 1 { return number-to-hex(floor($number / 16), $width - 1) + "#{$s}"; }else { @return “#{$s}”; }
}

// produce transparent colour in IE6 – 8. e.g.
// expects Moderizer .ie6, .ie7, .ie8 …
// div {
// @include ie-background-color(hsla(248,65%,20%,0.4));
// }
//
// .ie8 div {
// background: transparent;
// -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#661B1254,endColorstr=#661B1254)”;
// zoom: 1; }
// .ie6 div, .ie7 div {
// background: transparent;
// filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#661B1254,endColorstr=#661B1254);
// zoom: 1; }

mixin ie-background-color($color) {if opacity($color) == 1 { background: $color; } else { $a: number-to-hex(floor(opacity($color) * 255)); $r: number-to-hex(red($color)); $g: number-to-hex(green($color)); $b: number-to-hex(blue($color));debug $a; debug $r;debug $g; debug $b; $argb: "#" + $a + $r + $g + $b;debug $argb; .ie8 & { background: transparent; -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$argb},endColorstr=#{$argb})”; zoom: 1; } .ie6 & , .ie7 & { background: transparent; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$argb},endColorstr=#{$argb}); zoom: 1; } }
}

Nahuel says:
4 May 2011 ∞