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

Posted 2023-03-28

【中文标题】使用来自背景颜色的变量从 rgb 转换为 hex

【英文标题】：Conversion from rgb to hex using a variable from background color

【发布时间】：2021-11-29 17:07:06

【问题描述】：

我正在尝试使用变量进行从 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>

【问题讨论】：

让你成为minimal reproducible example

【参考方案1】：

您需要从 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>

【参考方案2】：

原因是，你的

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

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

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

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

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