Kilian Valkhof

CSS hexadecimal colors with transparency, a conversion tool

In both Chrome and Firefox, you can now use hexadecimal notation to describe semitransparent colors, by adding an extra pair of digits to the end of a hexadecimal notation.

This hexadecimal #rrggbbaa notation is pretty useful and saves you from looking up the conversion from hexadecimal to the 0-255 range that rgba() needs. However, doing math in hexadecimal notation (counting from 0 to F) isn’t something I, and I imagine many others, are quite adapt at. Say you want something at 50% transparent, how much is that in Hex? It’s 80! That’s not very intuitive.

It’s pretty similar to how IE’s in the past allowed you to do transparency, except they used ARGB, with the Alpha part at the beginning. Back in 2010 I wrote an article that included a conversion tool from rgba() to ARGB notation, useful for ancient versions of IE. You probably shouldn’t use that anymore. I figure, why not do a remix and update it for some rgba() to #rgba conversion!

Convert to and from rgba() and #rgba #

This notation works with both 8 digits and 4 digits (shorthand notation) so #ffffff88 and #fff8 both correspond to rgba(255,255,255,0.53); Quite a neat trick that works in Chrome from version 52 onwards (and Opera version 39, as they are both based on Chromium), Firefox 49 onwards and Safari 9.1 onwards. I could not find anything about Edge supporting it, or having support planned.

So, a useful extra way of defining semitransparent colors. I imagine, when browser support lets me, I’ll use this mostly in places where I already have #rgb notation and want to add opacity. For new colors, rgba() is much easier to reason in.