用纯 CSS 减轻 RGB

Question

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

SASS 的lightenmixin 运行良好：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%);

然后你就得到了更浅的颜色。