Estoy tratando de hacer una conversión de rgb a hexadecimal usando una variable.
En lugar de la última línea que quiero
var rgbnhcp1 = rgbToHex(nhcp1)Y luego usarlo para escribir en un div
document.getElementById("TextWithRgbValue").innerHTML = rgbnhcp1;El problema es que tienes que poner valor listo en el código de arriba, como rgb 20,45,233 y no una variable para luego usarlo para ponerlo en un div. ¿Podrías ayudar?
// 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>La razón es que su
var nhcp1 = window.getComputedStyle(document.querySelector(".nhcp1"), null).getPropertyValue('background-color'); está cargando una cadena "rgb(x, y, z)" en la variable nhcp1 .
Pero, su función rgbToHex(a, b, c) espera 3 parámetros enteros.
Entonces, todo lo que necesita hacer es extraer los 3 enteros de esa cadena nhcp1 y alimentar la función.
Esta respuesta lo ayudará a extraer un objeto que tenga los valores rgb como cadenas.
Necesitas extraer los 3 valores de la cadena rgb(a)
Nota: ignoro la posible transparencia.
// 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>