How to get the background color of an element (set to RGBA) in Javascript?

Question

I have an element with the Id box, which has a background color set to rgba(0, 0, 0, 0.3) on a white background. Like so:

#box {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: rgba(0, 0, 0, 0.3);
}

<div id="box"></div>

Using a color picker, I can see that the box's color is in hex is #b2b2b2. Now, what I want to know is there any way to get this hex code using JavaScript without convert RGBA to hex format? I read about getComputedStyle function, but could not get it to work. Any help is greatly appreciated.

Does this answer your question? [How to convert RGBA to Hex color code using javascript](https://stackoverflow.com/questions/49974145/how-to-convert-rgba-to-hex-color-code-using-javascript) — PEPEGA, Mar 25 '20 at 12:59
@PEPEGA No it does not, because my question is not just converting rgba to hex. Its also reading the background color first. — darkhorse, Mar 25 '20 at 13:12
Please show how you tried to get `getComputedStyle` to work. — Heretic Monkey, Mar 25 '20 at 13:36
So you want to get the composited color after all element layers have been rendered? — zero298, Mar 25 '20 at 13:36
Well, it can't really work since what your color picker shows you is a mix of colors. Your box is not really #b2b2b2, it's semi-transparent with something (white I suppose) behind. — Nicolas SEPTIER, Mar 25 '20 at 13:37
Does this answer your question? [How to get hex color value rather than RGB value?](https://stackoverflow.com/questions/1740700/how-to-get-hex-color-value-rather-than-rgb-value) — JackU, Mar 25 '20 at 13:39

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

I will consider this answer where I am detailing how the color is calculated between two layers to write the following script.

/* Utility function that you can easily find in the net */
function extractRgb (css) {
  return css.match(/[0-9.]+/gi)
}
function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
/**/

var c = window.getComputedStyle(document.getElementById('box')).backgroundColor;
c = extractRgb(c);

for(var i=0;i<3;i++)
  c[i] = parseInt(c[i]*c[3] + 255*(1 - c[3])); /* Check the linked answer for details */

console.log(rgbToHex(c[0],c[1],c[2]) )

#box {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: rgba(0, 0, 0, 0.3);
}

<div id="box"></div>

The script can easily be improved but the main idea is the formula uses to calculate the result between two colors:

ColorF = (ColorT*opacityT + ColorB*OpacityB*(1 - OpacityT)) / factor

ColorF is our final color. ColorT/ColorB are respectively the top and bottom colors. opacityT/opacityB are respectively the top and bottom opacities defined for each color:

The factor is defined by this formula OpacityT + OpacityB*(1 - OpacityT).

score 0 · Answer 2 · answered Mar 25 '20 at 13:52

I think basically what you are trying to do is comprehend what color the browser renders - which is quite different than what colors your elements' backgrounds are defined with.

As I said in a comment, you have a #box defined with a semi-transparent black color. Depending on what the element "behind" it is, your color picker will read something quite different (compare let's say a red background and a white background behind your #box).

I don't really know how to proceed to get the real rendered color, but I'd start looking at stuff like this, I suppose : https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/readPixels

Hope that helps.

Deadpool · Answer 3 · 2020-03-25T13:41:52.373

-3

Check it out:

$(document).ready(function(){
  alert(componentToHex($('#box').css('background-color')));
});

function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

alert(rgbToHex(0, 51, 255));

#box {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="box"></div>

edited Mar 25 '20 at 13:41

answered Mar 25 '20 at 13:37

Deadpool

7,811
9
44
88

From the OP: "I can see that the box's color is in hex is #b2b2b2. Now, what I want to know is there any way to get this hex code"... – Heretic Monkey Mar 25 '20 at 13:38
When I run it, it alerts "#0033ff", then "rgba(0, 0, 0, 0.3)". Neither of those is "#b2b2b2", as my first comment on this answer quotes from the question. – Heretic Monkey Mar 25 '20 at 13:48
@Deadpool Because you don't account for the fact the background-color has an alpha value and the color of the first colored parent node? – Nicolas SEPTIER Mar 25 '20 at 13:48

How to get the background color of an element (set to RGBA) in Javascript?

3 Answers3