用纯 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 变量。

我尝试过的事情

opacity: 0.75 - 不透明度使背景渗入我不想要的颜色。
filter: brightness( - 滤镜影响整个元素，但我只想使特定颜色变亮。
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%);

而且你得到了更浅的颜色。

用纯 CSS 照亮 RGB

Lighten RGB with pure CSS

html

css

sass

brightness

我尝试过的事情