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>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.
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>