How to Convert Rgba to a Transparency-Adjusted-Hex

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

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

How to give opacity to a color with hex value in css?

You may use this way to convert the transparent for your current hex colour

For example, you want to set 40% alpha transparency to #000000 (black colour), you need to add 66 like this #66000000. The format is #AARRGGBB so you could use a format like #1C00ff00.

You could also check the full table hex -> transparent colour here
https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4

Hex transparency in colors

Here's a correct table of percentages to hex values for opacity. E.g. for 50% white you'd use #80FFFFFF. To think in terms of transparency instead, flip the order of the percentages (more opaque = less transparent).



Leave a reply



Submit