如何在JavaScript中从CSS相对颜色字符串获取最终十六进制颜色？

内置方案：利用Canvas提取像素颜色 #

通过Canvas绘图上下文解析并应用CSS颜色，绘制单个像素后提取其RGBA值，能可靠获取最终计算结果，兼容性覆盖绝大多数现代浏览器。

function getComputedActualColor(element) {
  const canvas = document.createElement('canvas');
  canvas.width = 1;
  canvas.height = 1;
  const ctx = canvas.getContext('2d');
  
  ctx.fillStyle = window.getComputedStyle(element).color;
  ctx.fillRect(0, 0, 1, 1);
  
  const pixelData = ctx.getImageData(0, 0, 1, 1).data;
  return {
    r: pixelData[0],
    g: pixelData[1],
    b: pixelData[2],
    alpha: pixelData[3] / 255
  };
}

// 使用示例
const myElement = document.querySelector('.my-element');
const finalColor = getComputedActualColor(myElement);
console.log(finalColor); // 输出示例：{ r: 186, g: 187, b: 162, alpha: 0.8 }

第三方库方案：color.js #

若无需依赖DOM元素，或需要在非浏览器环境（如Node.js）中计算，可使用color.js——它完全实现了CSS颜色规范，支持相对颜色语法的解析与精确计算。

// 已引入color.js的前提下
const inputColor = 'rgb(from #aabbcc calc(r + 30) g calc(b - 30) / 80%)';
const color = Color.parse(inputColor);
const srgbCoords = color.to('srgb').coords;

console.log({
  r: Math.round(srgbCoords[0] * 255),
  g: Math.round(srgbCoords[1] * 255),
  b: Math.round(srgbCoords[2] * 255),
  alpha: srgbCoords[3]
});

现代浏览器原生优化方案 #

若使用Chrome 111+等完全支持CSS相对颜色的现代浏览器，getComputedStyle会直接返回计算后的颜色字符串，此时可通过CSSColorValue解析为可操作的颜色对象：

const computedColorStr = window.getComputedStyle(myElement).color;
const color = CSSColorValue.parse(computedColorStr);

console.log({
  r: color.r.value,
  g: color.g.value,
  b: color.b.value,
  alpha: color.alpha.value
});

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