Conversion from rgb to hex using a variable from background color

Question

I'm trying to do a conversion from rgb to hex using a variable.

Instead of the last line I want

var rgbnhcp1 = rgbToHex(nhcp1)

And later use it to write in a div

document.getElementById("TextWithRgbValue").innerHTML = rgbnhcp1;

The problem is that you have to put ready value in the code above, like rgb 20,45,233 and not a variable to later use it to put it in a div. Could you help?

// Variables - taking color property in rgb from css classes

var nhcp1 = window.getComputedStyle(document.querySelector(".nhcp1"), null).getPropertyValue('background-color');

var nhcp2 = window.getComputedStyle(document.querySelector(".nhcp2"), null).getPropertyValue('background-color');

var nhcp3 = window.getComputedStyle(document.querySelector(".nhcp3"), null).getPropertyValue('background-color');

var nhcp4 = window.getComputedStyle(document.querySelector(".nhcp4"), null).getPropertyValue('background-color');

var nhcp5 = window.getComputedStyle(document.querySelector(".nhcp5"), null).getPropertyValue('background-color');

// RGB to HEX

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);
}

console.log(rgbToHex(0, 51, 255)); // #0033ff

.nhcp4 { bakground-color:teal}
.nhcp5 { bakground-color:yellow}

<div class="nhcp1" style="background-color:red">Div 1</div>
<div class="nhcp2" style="background-color:blue">Div 2</div>
<div class="nhcp3" style="background-color:green">Div 3</div>
<div class="nhcp4">Div 4</div>
<div class="nhcp5">Div 5</div>

score 0 · Answer 1 · answered Oct 10 '21 at 18:56

The reason is, your

var nhcp1 = window.getComputedStyle(document.querySelector(".nhcp1"), null).getPropertyValue('background-color');

is loading a string "rgb(x, y, z)" into the variable nhcp1.

But, your function rgbToHex(a, b, c) expects 3 integer parameters.

So, all you need to do is extract the 3 integers from that nhcp1 string and feed into the function.

This answer will help you in extracting an object having the rgb values as strings.

score 0 · Accepted Answer · answered Oct 10 '21 at 19:01

You need to extract the 3 values from the rgb(a) string

Note I ignore possible transparency

// RGB to HEX
const componentToHex = c => (+c).toString(16).padStart(2,"0").toUpperCase();


const rgbToHex = (rgb) => {
  const [r, g, b] = rgb.split(",");
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b)
};

const getRgb = selector => window.getComputedStyle(document.querySelector(selector), null).getPropertyValue('background-color').match(/(\d+, \d+, \d+)/)[1]

console.log(rgbToHex(getRgb(".nhcp1")));
console.log(rgbToHex(getRgb(".nhcp2")));
console.log(rgbToHex(getRgb(".nhcp3")));
console.log(rgbToHex(getRgb(".nhcp4")));
console.log(rgbToHex(getRgb(".nhcp5")));

.nhcp4 {
  background-color: teal
}

.nhcp5 {
  background-color: rgba(211, 0, 211, 0.5)
}

<div class="nhcp1" style="background-color:red">Div 1</div>
<div class="nhcp2" style="background-color:blue">Div 2</div>
<div class="nhcp3" style="background-color:green">Div 3</div>
<div class="nhcp4">Div 4</div>
<div class="nhcp5">Div 5</div>

Conversion from rgb to hex using a variable from background color

2 Answers2