如何在JavaScript中测试颜色值？解决跨浏览器格式兼容问题

在JavaScript中设置颜色值并不复杂，但跨浏览器下，window.getComputedStyle(element).getPropertyValue("color")或window.getComputedStyle(element).getPropertyValue("background-color")返回的标准颜色格式是什么？这些返回值是字符串，很难直接测试特定颜色或透明度。

有没有可靠的方法将这些值转换为[r-value, g-value, b-value, alpha]数组或其他可比较的CSS颜色格式/字符串？比如实现类似Color.equal(colorString1, colorString2)的布尔函数？

（注：我花了四天调试才发现，语义相同的"rgb(0 0 0/0)"和"rgba(0, 0, 0, 0)"并不相等）

1. 跨浏览器返回的颜色格式 #

主流浏览器（Chrome、Firefox、Safari、Edge）对计算后颜色的返回格式存在小差异，但大体分为两类：

• 不透明颜色：rgb(r, g, b)（逗号分隔）或rgb(r g b)（空格分隔，CSS Color Level 4标准）
• 半透明/透明颜色：rgba(r, g, b, a)（逗号分隔）或rgb(r g b / a)（空格+斜杠分隔，CSS Color Level 4标准）
  旧版浏览器可能返回十六进制（如#000000）或颜色关键词（如black），但现代浏览器已基本统一到RGB/RGBA系列格式。

2. 转换为[R, G, B, A]数组的可靠方法 #

利用Canvas的getImageData可以解析所有合法CSS颜色，输出标准化的RGBA数值：

function colorToRGBA(colorStr) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = colorStr;
  const pixelData = ctx.getImageData(0, 0, 1, 1).data;
  // 返回[R, G, B, A]，A的范围是0-255，如需转为0-1可除以255
  return Array.from(pixelData);
}

该方法支持所有CSS颜色格式（RGB、RGBA、十六进制、HSL、颜色关键词等），且跨浏览器表现一致。

3. 实现颜色相等比较函数 #

基于上述转换方法，直接对比两个颜色的RGBA数值即可：

function areColorsEqual(color1, color2) {
  const rgba1 = colorToRGBA(color1);
  const rgba2 = colorToRGBA(color2);
  return rgba1.every((val, idx) => val === rgba2[idx]);
}

测试示例：

areColorsEqual("rgb(0 0 0/0)", "rgba(0, 0, 0, 0)"); // 返回true
areColorsEqual("#000", "rgb(0,0,0)"); // 返回true

4. 转换为统一格式字符串 #

如果需要固定格式的字符串用于比较或存储，可以在RGBA数组基础上拼接为统一格式：

function colorToNormalizedString(colorStr) {
  const [r, g, b, a] = colorToRGBA(colorStr);
  return a === 255 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${a/255})`;
}

转换后所有颜色都会变为逗号分隔的RGB/RGBA格式，直接对比字符串即可判断是否相等。

内容的提问来源于stack exchange，提问作者theking2