使用背景颜色的变量从 rgb 转换为 hex

Question

我正在尝试使用变量将 rgb 转换为 hex。

而不是我想要的最后一行

var rgbnhcp1 = rgbToHex(nhcp1)

然后用它写成div

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

问题是您必须在上面的代码中放入现成的值，例如 rgb 20,45,233，而不是稍后使用它来将其放入 div 中的变量。你能帮忙吗？

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

Answer 1

原因是，你的

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

正在将字符串 "rgb(x, y, z)" 加载到变量 nhcp1 中。

但是，您的函数 rgbToHex(a, b, c) 需要 3 个整数参数。

因此，您需要做的就是从 nhcp1 字符串中提取 3 个整数并输入函数。

将帮助您提取具有 rgb 值作为字符串的对象。

Answer 2

您需要从 rgb(a) 字符串中提取 3 个值

注意我忽略了可能的透明度

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

使用背景颜色的变量从 rgb 转换为 hex

Conversion from rgb to hex using a variable from background color

javascript

variables

rgb

hex

converters