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

Question

假设我有一个这样的 CSS，它使用 CSS 相对颜色语法：

.my-element {
  color: rgb(from #aabbcc r + 30 g b - 30 / 80%);
}

（在现实生活中，这个例子将使用 CSS 变量，我知道如何用实际值替换这些变量，所以我简化了它）。

在 CSS 中，它计算出红色通道增加、蓝色通道减少以及 80% alpha 通道的颜色。

我需要获取该颜色并在我的 JS 中进一步操作它。尝试使用

getComputedStyle

- 它没有帮助，只是返回颜色的初始字符串表示形式。

那么，有没有办法在 JS 中获得最终的颜色呢？有任何内置解决方案或库吗？

Answer 1

正如@temani-afif所述，正确的语法是：

.my-element {
    color: rgb(from #aaaaaa calc(r + 30) g calc(b - 30) / 80%);
}

然后，要获得计算出的颜色，您可以使用

getComputedStyle

（我将

#aabbcc

更改为

#aaaaaa

以获得更好的表示效果）：

const element = document.querySelector('.my-element');
const computedStyle = getComputedStyle(element);
const color = computedStyle.color;
console.log(color);

.my-element {
  color: rgb(from #aaaaaa calc(r + 30) g calc(b - 30) / 80%);
}

<div class="my-element">Some Text</div>

此外，如果您想将其转换为

rgba

：

function srgbToRgb(srgb) {
  const match = srgb.match(/^color\(srgb\s+(.+?)\s+(.+?)\s+(.+?)\s+\/\s+(.+?)\)$/);
  if (!match) {
    throw new Error('Invalid srgb color');
  }
  const r = Math.round(parseFloat(match[1]) * 255);
  const g = Math.round(parseFloat(match[2]) * 255);
  const b = Math.round(parseFloat(match[3]) * 255);
  const a = parseFloat(match[4]);
  return `rgba(${r}, ${g}, ${b}, ${a})`;
}

const element = document.querySelector('.my-element');
const computedStyle = getComputedStyle(element);
const color = computedStyle.color;
console.log(srgbToRgb(color));

.my-element {
  color: rgb(from #aaaaaa calc(r + 30) g calc(b - 30) / 80%);
}

<div class="my-element">Some Text</div>