Conversion from rgb to hex using a variable from background color-CodePudding

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>

CodePudding user response：

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.

CodePudding user response：

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>