CSS 相对颜色语法的使用案例，我太爱这个语法了 ~

时间：2025-12-24 00:48 作者：独元殇 分类： 前端技术

今天我决定讲一个技巧，上个星期刚遇到的例子，趁热打铁，是与这个问题有关的知识点，关于 CSS 相对颜色这个新语法。

CSS 的颜色定义方式应用场景如下（下面会用到，很重要）：

十六进制代码 (HEX) ：#3b82f6 ，主要给机器读的，体积小。用的最多。
RGBA ： rgb(59 130 246 / 0.5) ，方便调试屏幕。能看清楚各通道。还算常用。
HSL ：hsl(217 91% 60%) ，色相 (0-360)，饱和度、亮度，比较容易计算同色系配色。据说很符合人认知，书上写着比较推荐使用这个。但用的少。
OKLCH：亮度 (L)，色度 (C)，色相 (H)。容易计算对比度。我从没讲见谁用过。

可是，现在，我给了你一个 CSS 的 16 进制颜色： #F5ECAF ，那么请问你应该怎么设置它的不透明度呢？在 Sass 中我们可以这样写 rgba($color, 0.5); ，但现在我们不想使用 Sass ，怎么搞？

可以使用 RGB() 颜色，直接修改它的透明值！

比如说，我们现在有一个按钮，我们如何让我们的光标，悬浮在按钮上时，能让其表色稍微变浅一点？（可在分格 HTML 编辑器这个工具里运行）

<style>
  button {
    --alpha: 1;
    background-color: rgb(156 60 231 / var(--alpha)); /* 关键 */
    transition: 0.3s; /* 过渡动画 */
  }
  button:hover {
    --alpha: 0.6;
  }
</style>

<button>鼠标悬浮我看效果</button>

效果如下：

当我们鼠标放到上面时，奇迹发生了！颜色竟然自动变浅了。

我们看一下这个 rgb() 函数，它里面是 4 个变量，最后一个是透明度。我们指定了 button 的背景是那样一个关系，现在我们在新的 CSS 选择器里搞透明度，没想到这个值不是死值，是活的（是不是很反认知），你只要改了这个变量 --alpha，它自己就变了！

在真实的建站过程里，我们经常需要得出一个颜色，它的较浅的颜色值或者较深的颜色值。当使用 16 进制的颜色值，或者一个 RGB 颜色时，就不好搞了。

但如果不是 rgb 呢？你可能说没必要，都改成 rgb 不就行了？

但是，在使用 Figma 这种设计工具时，我们很容易默认得到的是 16 进制的颜色。你可以改，但在我们的项目里，已经堆积了很多 16 进制的历史颜色了。所以.... 总不能都改成别的格式吧？

当然，如果我们要得出一个颜色的较深的那个色，可以使用浏览器开发者工具，直接在里面滑动点选。但这样显然会繁琐。而且，像这种内容，它也确实使用场景非常多，比如边框的颜色、按钮的阴影。

那么现在，我们就需要用到新语法， relative colors （相对颜色）语法了！

目前，所有浏览器都支持这个语法了。

还是长它们原来的样子，比如 rgb 还是 rgb() 。

只不过是写成这种样子 rgb(from #3b82f6 r g b / 0.1); ！

非常的直接！从 #3b82f6 里提取 r g b 三个通道，然后透明度都设置成 0.1 ！

当然，透明度还不行。我们上面还有 HSL() 这种，包含色相、饱和度、亮度三种格式的颜色格式：hsl(217 91% 60%) 。它也能用！

于是，咱今天聊的这个 from 可以实现更丰富的功能。

<style>
  button {
    --brand-color: #9333ea;
    background: var(--brand-color);
    padding: 1rem 2rem; color: white;
    transition: all 0.1s ease-out;
  }
  button:active {
    /* 颜色变暗一点点 */
    background: hsl(from var(--brand-color) h s calc(l - 20));
  }
</style>

<button>按一下我</button>

效果如下：

这个按钮，你按一下，就会变暗！

这是从 #9333ea 里提取了亮度这个值（就是 l 这个），然后让 l - 20 。

（你感兴趣，还可以自己试试改改色相、饱和度！）

这样，我们就可以使用古老的项目里，已经被定义好的 16 进制颜色值，直接原生转换。等于搞了个 CSS 的计算器！

有什么用呢？

比如我们有很多卡片，如何能搞几个亮度一样，但色不一样的呢？用这个轻松就能搞出来。

<style>
  div {
    --seed: #e11d48; /* 玫瑰红 */
    background: hsl(from var(--seed) calc(h + var(--hue-rotate)) s l);
    color: white; 
    padding: 20px; 
    margin: 5px; 
    width: 100px; 
  }
</style>

<div style="--hue-rotate: 0">基准红</div>
<div style="--hue-rotate: 60">加60° 黄</div>
<div style="--hue-rotate: 150">加150° 绿</div>
<div style="--hue-rotate: 240">加240° 蓝</div>

就像这个样子：

但很遗憾，很丑！为什么？其实，是因为亮度不均匀！而我们最开始提到的 oklch 这个工具，就很好的能生成，人之肉眼友好的颜色。使其亮度在大脑看来更均匀。这个 oklch 是为人类感知，而不是物理定理设计的。

<style>
  div {

    --seed: #ff0055;
    /* 只旋转 H(色相) */
    background: oklch(from var(--seed) l c calc(h + var(--deg)));

    color: white; 
    padding: 20px; 
    margin: 5px; 
    width: 100px; 
  }
</style>

<div style="--deg: 0">原色</div>
<div style="--deg: 90">转90°</div>
<div style="--deg: 180">转180°</div>
<div style="--deg: 270">转270°</div>

看一下这个效果，好看多了：