How to convert rgba to a transparency-adjusted-hex?

css colors hex transparency rgba
frequent picture frequent · Apr 9, 2013 · Viewed 20.2k times · Source

I'm wondering how to convert rgba into hex in a way that translates the visible rgba-color (including transparency) into a hex value.

Say I have this: 

rgba(0,129,255,.4)

Which is sort of a "light blue"...

I would like to know if there is a way to get the same light blue "visible" color in hex, so I don't want the converted #0081ff but something close to the color visible on screen.

Question:
How to convert rgba to a transparency-adjusted-hex?

Answer

zakinster picture zakinster · Apr 9, 2013

It depends on the background to which your transparent color will be applied. But if you know the color of the background (e.g. white), you can calculate the RGB color resulting of the RGBA color applied to the specific background.

It's just the weighted average between the color and the background, the weight being the alpha channel (from 0 to 1) :

Color = Color * alpha + Background * (1 - alpha);

For your transparent light blue rgba(0,129,255,.4) against white rgb(255,255,255) : 

Red   =   0 * 0.4 + 255 * 0.6 = 153
Green = 129 * 0.4 + 255 * 0.6 = 204.6
Blue  = 255 * 0.4 + 255 * 0.6 = 255

Which gives rgb(153,205,255) or #99CDFF

Related questions

How can I use 3-digit color codes rather than 6-digit color codes in CSS?

I recently went through my CSS file and switched all my six-digit hexadecimal codes to simple three-digit codes (for example, my #FDFEFF got shortened to #FFF). It renders pretty much the exact same color as before, and it seems to …

Read More
Convert RGBA to HEX

Given a css color value like: rgba(0, 0, 0, 0.86) How do I convert that to a RGB hex value that takes the alpha component into account, assuming a white background?

Read More
Does style="color: #FFF;" render as #F0F0F0 or #FFFFFF?

When defining colors using "shorthand hexidecimal" (style="color: #FFF;"), is there a defined method for expanding the shorthand? (style="color: #F0F0F0;" or style="color: #FFFFFF;") Do all browsers use the same expansion method? Is this behavior by specification (…

Read More