41

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?

Sean
  • 6,873
  • 4
  • 21
  • 46
frequent
  • 27,643
  • 59
  • 181
  • 333
  • Have you tried doing using that alpha percentage to change the rest of the values? I'm assuming you want this with the rgba value against a white background, so use the percentage to equalise to a "whiter" value. Example: 0,129,255,.4 == 102, 231, 255 ??? Just a guess – jakobhans Apr 09 '13 at 09:55

3 Answers3

85

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

zakinster
  • 10,508
  • 1
  • 41
  • 52
32

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);
mplungjan
  • 169,008
  • 28
  • 173
  • 236
David Rosson
  • 1,054
  • 1
  • 10
  • 15
  • I've tried a bunch of online conversion tools and none seemed to properly convert the alpha channel. They didn't understand 'rgba(0,0,0,0.6)' and kept returning #000000 despite that being full black but the canvas they were drawing on was grey. But your hexify function properly converted it to #666666 and rgba(0,0,0,0.2) to #cccccc Thank you! – Michael Kubler Sep 11 '19 at 11:35
  • Loved your answer it worked for me – Mehul Kothari Jan 06 '22 at 07:09
5

You can save yourself some time and calculations by using chrome's eyedropper tool. What I usually do is set a big div's background color to the rgba I have then add a color attribute in CSS to some random hex value. Then you just click on the colored square next to that random hex value and hover over the div that has the background color on the page and use the eyedropper to select the background color. If it comes back as rgba you can cycle through hsla, rgba, and hex by clicking that colored square again and click the up and down arrows to the right.

warrendugan
  • 51
  • 1
  • 3