How to convert rgba to a transparency-adjusted-hex?
function hexify(color) {
var values = color
.replace(/rgba?\(/, '')
.replace(/\)/, '')
.replace(/[\s+]/g, '')
.split(',');
var a = parseFloat(values[3] || 1),
r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
return "#" +
("0" + r.toString(16)).slice(-2) +
("0" + g.toString(16)).slice(-2) +
("0" + b.toString(16)).slice(-2);
}
var myHex = hexify('rgba(57,156,29,0.05)'); // "#f5faf3"
console.log(myHex);
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