将 CSS 颜色解析为 RGBA 值

Parse CSS Color to RGBA values

本文关键字：RGBA CSS 颜色      更新时间：2023-09-26

我想从一些<颜色>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功能吗？

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

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

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

相关文章：