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?

3
  • 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.
    Commented Feb 5, 2014 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. Commented Feb 5, 2014 at 11:42
  • 1
    Oh now I see what you're trying to do, sorry.
    – Marco A.
    Commented Feb 5, 2014 at 11:59

4 Answers 4

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)

8
  • That looks promising. Converting RGB to HEX is missing, but thats the easy part. Commented Feb 5, 2014 at 15:29
  • 1
    @gaitat Thank you for reporting it. Fixed it with a post on my blog.
    – Marco A.
    Commented Dec 1, 2016 at 10:03
  • 1
    Very cool. Could it please accept typed-in colors, as well as the current color picker?
    – josinalvo
    Commented May 2, 2017 at 17:46
  • 1
    @josinalvo Done, luckily the color picker I'm using supports it natively
    – Marco A.
    Commented May 2, 2017 at 18:02
  • 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
    Commented Feb 9, 2023 at 8:16
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
1
  • 3
    That would still give me RGBA, just in another format. What I need is RGB, with the alpha applied to the individual RGB values. Commented Feb 5, 2014 at 15:19
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.

-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)
1
  • 1
    None of the online converters you mentioned support alpha. The one I found doesn't appear to work. Commented Feb 5, 2014 at 15:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.