CSS 新特性：一行代码解决颜色维护难题！

相较于传统手动调整色值的方式，CSS 新增的 Relative Colors（相对颜色）功能，彻底解决了前端开发中颜色难维护、样式重复多、视觉效果不统一等长期痛点。

毫不夸张地说，很多原本需要几十甚至上百行 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。以后只需更新主色，相关派生色都会自动同步更新。

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

优势	说明
避免重复	不再为每个场景手动编写一堆相近的颜色值
易于维护	修改一次基准色，所有衍生样式自动同步
保持一致性	统一视觉风格，避免“看起来差不多却略有偏差”的问题

Relative Colors 的语法结构

CSS 当前支持以下语法：

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

支持的颜色模型包括：

hsl()、rgb()（经典模型）

lab()、lch()、oklab()（现代模型，适用于高保真配色）

语法关键点：

from：表示基于某个已有颜色进行派生

可选择性修改特定通道（如仅调整亮度）

支持 calc() 进行动态计算

示例：亮度 +10%

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

表示保留色相和饱和度，仅将亮度提高 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: 10px 20px;
  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 {
  background-color: var(--button-color);
}

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

效果一致、结构清晰，只需一套逻辑，轻松扩展维护。

浏览器支持情况（截至 2025 年）

浏览器	最低版本
Chrome	v119+
Edge	v119+
Firefox	v128+
Safari	v18.0+（含 iOS）

使用建议与注意事项

注意事项	说明
不支持旧浏览器	IE 和部分老版本浏览器不兼容，建议做兼容回退
用于动态色值	固定色值元素无需强行使用
避免极端计算	如 calc(l - 90%) 可能导致亮度过低，影响可读性

总结

CSS 中的 Relative Colors 是一项被低估但极具潜力的新特性：

减少重复代码，提升开发效率

统一视觉风格，易于维护

灵活定义变体，像写逻辑一样控制配色

现代浏览器全面支持，随时可用

下一次项目中，不妨尝试引入这项特性 —— 一行 CSS，开启颜色管理的“变量驱动 + 动态计算”新时代！

作者：一纸忘忧

链接：https://juejin.cn

+友情链接