相较于传统的手动调整色值，CSS 中新增的 relative colors（相对颜色）功能，直接解决了多年来前端开发中颜色维护难、样式重复多、效果不统一等一系列问题。

不夸张地说：这项功能，让无数本来要写 10 多行甚至上百行 JavaScript 的需求，现在只需要一行 CSS。

什么是 Relative Colors？

相对颜色，顾名思义，是基于已有颜色修改其某些成分（如亮度、透明度、色相等）来生成新的颜色。核心思想就是：定义一次，派生多个场景样式。

示例：

:root {
  --main-color: #0066cc;
  --hover-color: color-mix(in srgb, var(--main-color), white 20%);
}

含义是：将 --main-color 与白色按 80:20 的比例混合，生成悬停时使用的 --hover-color。以后只需修改 --main-color，其他派生颜色都会自动更新。

为什么推荐使用相对颜色？

Relative Color 的语法结构

CSS 支持以下语法：

hsl(from <源颜色> h s l / alpha)
rgb(from <源颜色> r g b / alpha)

支持的颜色模型：

• hsl()、rgb()
• lab()、lch()、oklab()（更现代的模型，适合高级配色）

关键点：

• from 语法表示“从某个已有颜色取值”
• 可选择重用部分值或修改特定通道
• 支持 calc() 用于亮度或透明度的动态调整

示例：修改亮度

hsl(from var(--button-color) h s calc(l + 10%))

这段代码代表从 --button-color 中提取色相与饱和度，仅对亮度进行+10%的调整。

实战场景：统一按钮悬停样式

传统做法中，每种按钮颜色都需要单独定义悬停态，如下：

.button-blue:hover   { background-color: #007fff; }
.button-green:hover  { background-color: #3fb96e; }
.button-red:hover    { background-color: #e04c4c; }

这种方式冗长、难维护。

相对颜色版本：

:root {
--btn-blue: hsl(220, 100%, 50%);
--btn-green: hsl(140, 70%, 45%);
--btn-red: hsl(0, 80%, 55%);
--btn-yellow: hsl(45, 100%, 50%);
}

.button {
color: white;
border: none;
padding: 10px20px;
cursor: pointer;
}

.button.blue   { --button-color: var(--btn-blue); }
.button.green  { --button-color: var(--btn-green); }
.button.red    { --button-color: var(--btn-red); }
.button.yellow { --button-color: var(--btn-yellow); }

.button.blue,
.button.green,
.button.red,
.button.yellow {
background-color: var(--button-color);
}

/* 通用 hover 样式 */
.button:hover {
background-color: hsl(from var(--button-color) h s calc(l + 10%));
}

这样，无论有多少按钮，只需定义一个悬停样式，统一且易维护。

浏览器支持情况

截至 2025 年，以下浏览器已支持 relative colors：

使用时的注意事项

总结

CSS 中的 relative colors 是一个被严重低估却极具潜力的新特性：

• 减少代码重复，减少手动维护；
• 保证 UI 风格一致性；
• 改变颜色变体像写逻辑一样灵活；
• 已在大多数现代浏览器中得到支持。

不妨在下一个项目中尝试引入它，一行 CSS，带来意想不到的开发与维护便利。

让颜色管理进入“变量驱动 + 动态计算”的新阶段！