如何从 javascript 中的 css 颜色名称中获取 rgb(或十六进制)代码

Question

我正在制作一个画布量规插件，我需要将"粉红色">和"橙色">等 css 颜色代码转换为 RGB 格式。

我想background: pink;设置一些元素，并用这样的$('el').css('background');恢复颜色，但我不知道这是否总是会返回我想要的，无论如何它看起来很奇怪。

我希望有一些内置的窗口方法或可以为我完成此转换的方法，而无需为所有代码包含一个大的地图对象。

Answer 1

我需要将"粉红色"和"橙色"等 css 颜色代码转换为 RGB 格式 [...]我希望有一些内置的窗口方法或可以为我完成此转换的方法，而无需为所有代码包含一个大的地图对象。

是的，有。您正在寻找的方法window.getComputedStyle()

您可以运行以下步骤：

• 创建标准<div>
• 将颜色添加到<div>的样式对象
• 将<div>追加到 DOM
• 使用window.getComputedStyle()检查<div>的计算样式

<小时 />

工作示例：

const colorKeywordToRGB = (colorKeyword) => {
  // CREATE TEMPORARY ELEMENT
  let el = document.createElement('div');
  // APPLY COLOR TO TEMPORARY ELEMENT
  el.style.color = colorKeyword;
  // APPEND TEMPORARY ELEMENT
  document.body.appendChild(el);
  // RESOLVE COLOR AS RGB() VALUE
  let rgbValue = window.getComputedStyle(el).color;
  
  // REMOVE TEMPORARY ELEMENT
  document.body.removeChild(el);
  return rgbValue;
}
console.log('pink:', colorKeywordToRGB('pink'));
console.log('orange:', colorKeywordToRGB('orange'));

<小时 />

延伸阅读：

• https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Answer 2

github.com/jquery/jquery-color/blob/master/jquery.color.js

可能是您所追求的处理库。