37

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?

Michael Böckling
  • 7,341
  • 6
  • 55
  • 76
  • 1
    RGBA perhaps, RGB can't take alpha into account unless you agree on some sort of steganography-like technique for inserting your data into it (and you need to have the bit-space to do that) – Marco A. Feb 05 '14 at 11:36
  • 1
    Nope, I mean RGB. Basically, what you would get when rendering the page, making a screenshot, and using a color picker to get the hex color value from the area that has the given rgba css color assigned to it. – Michael Böckling Feb 05 '14 at 11:42
  • 1
    Oh now I see what you're trying to do, sorry. – Marco A. Feb 05 '14 at 11:59

4 Answers4

65

Since alpha value both attenuates the background color and the color value, something like this could do the trick:

function rgba2rgb(RGB_background, RGBA_color)
{
    var alpha = RGBA_color.a;

    return new Color(
        (1 - alpha) * RGB_background.r + alpha * RGBA_color.r,
        (1 - alpha) * RGB_background.g + alpha * RGBA_color.g,
        (1 - alpha) * RGB_background.b + alpha * RGBA_color.b
    );
}

(Try it interactively: https://marcodiiga.github.io/rgba-to-rgb-conversion)

Marco A.
  • 43,032
  • 26
  • 132
  • 246
  • That looks promising. Converting RGB to HEX is missing, but thats the easy part. – Michael Böckling Feb 05 '14 at 15:29
  • the link does not exist any more! – gaitat Nov 30 '16 at 23:48
  • 1
    @gaitat Thank you for reporting it. Fixed it with a post on my blog. – Marco A. Dec 01 '16 at 10:03
  • 1
    Very cool. Could it please accept typed-in colors, as well as the current color picker? – josinalvo May 02 '17 at 17:46
  • 1
    @josinalvo Done, luckily the color picker I'm using supports it natively – Marco A. May 02 '17 at 18:02
  • Looks cool, but for some reason I cannot understand why it doesn't work for me. The way I'm trying to call it is `rgba2rgb('rgb(255, 255, 255)', 'rgba(255, 96, 92, 0.1)');`. And it gives me an error: "Color is not defined". – john c. j. Aug 19 '19 at 14:50
  • 1
    @johnc.j. Old comment but adding here for others. The function expects array or object values so that they can be accessed as RGBA_color.a, for example. In your comment, you are passing in strings. – Tom Feb 09 '23 at 08:16
  • I assume this code accounts for the white background with which the color blends. Does anyone know how to make this work for arbitrary background colors? – MartinT Mar 31 '23 at 13:19
0

Assuming that the values are 0...1 per channel. And assuming that the abbreviation in the method / function call in the question correspond to the arguments, the following should work.

A = 255 * 0.86
R = 255 * 0
G = 255 * 0
B = 255 * 0

Note you may want to change how it rounds off here as it may give inaccuracies in colours.

At this point, the values are in fact still floating point values, but casting them to a byte or a char (depending on language), should in theory work.

var _A = (byte)219.3
var _R = (byte)0
var _G = (byte)0
var _B = (byte)0

Now all you have to do is convert them to a hexadecimal string each, and concatenate them (ARGB) and put a nice little hash tag in front (#)

In C# you could do something akin to:

var hexString = string.Format("#{0:X2}{1:X2}{2:X2}{3:X2}", _A, _R, _G, _B);

Yielding a final result of something like:

#DB000000
t0yk4t
  • 854
  • 8
  • 10
0

you can convert red,green and blue individually using .toString(16) and then combine the result in a case, if you just want to convert a rgb to hex... since you are searching to convert rgba to hex i thought it would be better to convert the rgba to rgb and then to hex as i did in the following Fiddle, which would also consider the background-color of the parent div.

Green Wizard
  • 3,507
  • 4
  • 18
  • 29
-2

The rgba value you are having is: rgba(0, 0, 0, 0.86)

First 0 stands for RED
Second 0 stands for GREEN
Third 0 stands for BLUE
and the last digit 0.86 stands for alpha/opacity

Here are some links for rgb to hex converter:

http://www.javascripter.net/faq/rgbtohex.htm
http://www.rgbtohex.net/
http://www.yellowpipe.com/yis/tools/hex-to-rgb/color-converter.php

with you digits 0, 0, 0. The Hex Code will be

#000000

Following is the code for low opacity with a white background

HTML

<div id="parentDiv">
    <div id="childDiv">

    </div>
</div>

CSS

#parentDiv
{
height:100px;  /* The property of Child is Inherit */
width:100px;  /* The property of Child is Inherit*/
background-color:#ffffff;
}

#childDiv
{
height:inherit;
width:inherit;
background-color:#000000;
opacity:0.86;
filter:alpha(opacity="86");
}

Now the parent Div is the background with 

#ffffff (White color)
ArmaGeddON
  • 339
  • 1
  • 10