使用纯 CSS 减轻 RGB

Question

使用 pure CSS 如何使 RGB 变亮，例如：rgb(255, 0, 0)

SASS 的 lighten mixin 运行良好：lighten(rgb(255, 0, 0), 25%) 但是它不支持这样的 CSS 变量：lighten(var(--redColor), 25%)

我需要使用 CSS 变量，因为您可以在页面加载后即时更改 CSS 变量。

我尝试过的事情

1. opacity: 0.75 - 不透明度使背景渗入我不想要的颜色。
2. filter: brightness( - 过滤器会影响整个元素，但我只想减轻特定的颜色。
3. hsl(0, 100%, 50%) - HSL 看起来很有希望，但我需要一种将 RGB 转换为 HSL 以减轻 RGB 的方法。

理想情况下，我希望有一个 SASS mixin，它可以做一些 CSS 来减轻传递给它的任何颜色。

Answer 1

这是不可能的。

但是

使用hsl 使颜色变亮非常容易，因此如果您将hsl 颜色与RGB 一起存储，如下所示：

:root {
  --redColor: 142,  49,  42;
  --redColor_h: 4;
  --redColor_s: 54%;
  --redColor_l: 36%;
}

然后你可以用这个 SASS mixin 使颜色变亮：

@function lighten($shadeCode, $amount) {
  @return hsl(var(--#{$shadeCode}_h), var(--#{$shadeCode}_s), calc(#{var(--#{$shadeCode}_l)} + #{$amount}));
}

并像这样使用它：

background-color: lighten('redColor', 25%);

然后你的颜色变浅了。