使用纯CSS调节RGB亮度

Question

如何使用 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 的方式。

理想情况下，我希望有一个 SASS mixin，可以通过 CSS 改变任何传递给它的颜色。

- Joshua

---

我认为CSS3尚未支持颜色操作，但它将在CSS Color Module Level 4中推出：https://www.w3.org/TR/css-color-4/ - Terry

你想将这应用到背景吗？如果是这种情况，有很多方法。 - Temani Afif

相关：https://stackoverflow.com/a/51781919/8620333 / https://dev59.com/3VEG5IYBdhLWcg3wfPEp#65297702 / https://dev59.com/s1MI5IYBdhLWcg3wyurE#55330103 - Temani Afif

@TemaniAfif 我需要这个也能够适用于文本颜色，这样 filter 和 background-image 等属性就不会起作用。 - Joshua

这里有一篇关于为什么使用HSL而不是RGB的有用文章 [链接] https://elad.medium.com/why-css-hsl-colors-are-better-83b1e0b6eead 。很棒的一点是，你可以使用CSS变量作为每个组件和明度，它在RGB中没有多大意义。 - A Haworth

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%);

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

- Joshua

---

暗化怎么样？ - eddy

@eddy 这将是相同的函数，只是你需要减去 #{$amount} 而不是加上它。 - Joshua