将 CSS 颜色解析为 RGBA 值

Posted 2023-04-14

【中文标题】将 CSS 颜色解析为 RGBA 值

【英文标题】：Parse CSS Color to RGBA values

【发布时间】：2016-05-16 08:45:57

【问题描述】：

我想从一些 CSS 数据类型值中获取 RGBA 值。

该函数应该接受一个描述某种颜色的字符串，并返回一个具有红色、绿色、蓝色和 alpha 值的对象。

例如：

parseColor('red') ->  red: 255, green: 0, blue: 0, alpha: 1 
parseColor('#f00') ->  red: 255, green: 0, blue: 0, alpha: 1 
parseColor('rgb(255,0,0)') ->  red: 255, green: 0, blue: 0, alpha: 1 
parseColor('hsla(0,100%,50%,0.1)') ->  red: 255, green: 0, blue: 0, alpha: 0.1 
parseColor('transparent') ->  red: any_is_ok, green: any_is_ok, blue: any_is_ok, alpha: 0 

所以，我尝试了这样的代码：

function parseColor(color) 
  var x = document.createElement('div');
  document.body.appendChild(x);
  var color, rgba;
  var red = 0, green = 0, blue = 0, alpha = 0;
  try 
    x.style = 'color: ' + color + '!important';
    color = window.getComputedStyle(x).color
    rgba = color.match(/rgba?\((.*)\)/)[1].split(',').map(Number);
    red = rgba[0];
    green = rgba[1];
    blue = rgba[2];
    alpha = '3' in rgba ? rgba[3] : 1;
   catch (e) 
  
  x.parentNode.removeChild(x);
  return 'red': red, 'green': green, 'blue': blue, 'alpha': alpha;

它适用于 Firefox、IE 和 Chrome。 但我想知道window.getComputedStyle(x).color 会返回什么？ 此函数会总是以rgb() 或rgba() 格式返回颜色吗？ 规范是怎么说的？

还有，还有其他方法可以实现parseColor 函数吗？

【问题讨论】：

window.getComputedStyle(x).color 返回文档所说的返回内容。见developer.mozilla.org/en-US/docs/Web/API/Window/…。要找到其他方法，您可以搜索“npm html color”。这会导致你遇到这样的事情：github.com/substack/parse-color。另见***.com/questions/11068240/…。

@torazaburo 看来parse-color 或color-convert（被parse-color 使用）不支持alpha 值（透明度）。

@tsh 你交换了绿色和蓝色。它应该是blue = rgba[2]; 和green = rgba[1];。

@Roberg 啊哈，感谢您指出我的错误。已编辑。

【参考方案1】：

parseColor 函数通过创建虚拟元素并为其设置颜色来工作。因此它可以在 rgba() 或 rgb() 中获取颜色（这取决于color 是什么参数） 但结果将始终在 rgba() 中，因为

alpha = '3' in rgba ? rgba[3] : 1;

这意味着如果没有 alpha(a)，它将设置为 1