快速了解CSS 相对颜色

欢迎关注我的公众号：前端侦探

在正式开始介绍之前，可以先想一个问题：如何动态去改变一个颜色的透明度？

比如一个颜色

:root{
  color: red
}

如何将它变成透明度为 50% 的红色呢？

其实在之前这几篇文章中都有提到过一些颜色混合方法，有兴趣的可以回顾一下

• 深入了解CSS颜色混合函数color-mix
• CSS 颜色混合的N种方式
• 妙用 CSS 动画来实现颜色加深、减淡等混合操作

不过这些方式都是“偏方”。

现在 Chrome 119 中，令人无比期待的 CSS 相对颜色终于正式支持了！有了它，可以很轻松地将一个颜色转换成任意你所需要的颜色，对设计师和前端都非常友好，一起了解一下吧

一、什么是 CSS 相对颜色

CSS 相对颜色（CSS relative color）是 CSS Color Level 5 的新特性，它可以将一个颜色以某种颜色格式进行分解、重组，从而得到一个全新的颜色。

语法非常简单，以rgb为例

color: rgb(from red r g b / alpha)

这个表示将颜色red以rgb模式，分解成r、g、b（alpha）几个单独的变量，非常类似 JS 中的结构赋值。

也就是说，上面的写法最后等同于

color: rgb(255 0 0 / 100%)

那么，这个有什么用呢？

其实经过上面的from关键词分解以后，得到的r、g、b、alpha都是独立的变量，我们可以将任意变量改写成所需要的，比如透明度为50%

color: rgb(from red r g b / 50%) /* rgb(255 0 0 / 50%) */

注意，这里的颜色是完全动态的，我们还可以用 CSS 变量将任意颜色实时改变透明度

--color: red;
--color50: rgb(from var(--color) r g b / 50%)

下面是一个演示，可以实时将颜色的透明度变为50%

你也可以访问在线链接

• CSS relative color (codepen.io)

二、相对颜色实现的奥秘：calc

从上一节我们了解到，通过from关键词，可以将一个颜色分解成几个独立变量，比如r、g、b、alpha，但是，仅仅这样是不够的。

回到文章标题，为什么说是相对颜色呢？那肯定是和现在的颜色有些关联，要做到这一点，需要用到 CSS calc 函数。

举个例子，比如一个半透明的红色

--color: rgba(255,0,0,.5)

如何在这个基础上继续降低20%的透明度呢？

很简单，将这个颜色分解后，直接用calc进行计算

--color: rgba(255,0,0,.5)
--color20: rgb(from var(--color) r g b / calc(alpha - .2)) /*rgba(255,0,0,.3)*/

这样，无论给定的颜色是什么透明度，都可以在这个基础之上降低20%，这就是相对颜色！

下面介绍的几个例子都需要用到calc，接着往下看

三、颜色的加深和减淡

颜色的加深和减淡其实是提升和降低颜色的亮度。

提到亮度，需要用到有表示亮度（light）的颜色空间，比如说绿色，用hls表示如下

如果需要将这个绿色加深，就是需要将亮度调暗一点，比如减少10%

color: hsl(from green h s calc(l - .1 )); /*hsl(120deg 100% 15%)*/

如果需要将这个绿色减淡，其实就是需要将亮度调高一点

color: hsl(from green h s calc(l + .1 )); /*hsl(120deg 100% 35%)*/

下面是实际效果（中间是原色，两边分别是减淡和加深的效果）

四、让颜色更加鲜艳

和上面的例子一样，还可以通过改变颜色的饱和度，让颜色更加鲜艳

当然，这里就不能用上面的绿色了，因为它的饱和度已经是100了，我们换一个比较温和的绿色

color: hsl(122.42deg 39.44% 49.22%);

如果需要将这个绿色更加鲜艳一点，就是需要将饱和度提高一点，比如增加30%

color: hsl(from var(--color) h calc(s + .3) l); /*hsl(122.42deg 69.44% 49.22%)*/

如果需要将这个绿色看起来暗淡无光，直到成灰色，其实就是需要需要将饱和度减少一点

color: hsl(from var(--color) h calc(s - .3) l); /*hsl(122.42deg 9.44% 49.22%)*/

下面是实际效果（中间是原色，两边分别饱和度降低和增强的效果）

五、生成邻近色或者互补色

在 CSS 滤镜中有一个色相旋转滤镜，可以很轻松的改变任意元素的色相

filter: hug-rotate(30deg)

不过这种滤镜是整体改变，无法只改变某个颜色。

现在用 CSS 相对颜色就很好实现了，比如下面是红色在经过一系列色相变化后的效果

--color: red;
--color1: hsl(from var(--color) calc(h + 30 ) s l);
--color2: hsl(from var(--color) calc(h + 30 ) s l);
--color3: hsl(from var(--color) calc(h + 60 ) s l);
...

效果如下

这里每个颜色色相相差 30度， 相差180度的就是光学互补色，比如红色和青色（浅绿色）就是互补色

六、颜色的反向

所谓反向，就是黑的变白，白的变黑，蓝的变黄，绿的变紫色，这个在滤镜中也有现成的

filter: invert(1)

那么，相对颜色中如何计算呢？

其实这个是 rgb的计算方式，只需要将每个通道的颜色值反过来就行了，就像这样

color: rgb(from yellow calc(1 - r) calc(1 - g) calc(1 - b));

注意，这里的值都是归一化处理的，1 表示 255

效果如下，左边是原色，右边是反色

以上所有演示可以访问以下链接

• CSS relative colors demo (codepen.io)

七、最后总结一下

CSS 相对颜色可以说是关于 CSS 颜色处理最为强大的新特性了，几乎可以满足在 CSS 中一切关于颜色的计算，再也无需 JS参与计算了，下面总结一下要点

1. 在以往，CSS 中很难对一个颜色进行转换，只能通过滤镜或者其他偏方去处理
2. 现在出来了 CSS 相对颜色，可以将颜色按照颜色空间分解成单独的值，类似于 JS 中的解构赋值
3. 并且这些值可以随意配合 calc 计算，在现有基础上增加或者减少，因此叫做相对颜色
4. CSS 相对颜色可以实现颜色的加深和减淡、饱和度变化、色相变化，还有反色等需求

当然相对颜色的应用远远不止以上几点，可以说能够想到的场景都可以用这种方式来解决，将来，这一特性在全局主题应用中尤为重要，一起期待一下吧。最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发❤❤❤

欢迎关注我的公众号：前端侦探