CSS 颜色混合：color-mix() 与相对色

---

title: CSS 颜色混合：color-mix() 与相对色

keywords:

• color-mix()
• 相对色
• Lab/LCH
• 广色域
• gamut mapping

description: 介绍 CSS color-mix() 的语法与色彩空间选择、相对色与广色域的配合，在设计到实现保持色彩一致，并给出示例与兼容策略。

categories:

• 文章资讯
• 编程技术

---

概述

color-mix() 允许在指定色彩空间（如 lab/lch/srgb/display-p3）按比例混合颜色，相比仅在 sRGB 下混合，可获得更线性的、视觉更一致的结果。相对色语法可基于已有颜色进行调整，适用于主题与组件体系。

示例

.btn { color: color-mix(in lab, #0066ff 60%, white 40%) }
.accent { color: color(display-p3 0.9 0.2 0.2) }
/* 相对色（示意，浏览器支持需验证） */
.muted { color: color(from #0066ff lab l a b / 80%) }

工程建议

• 空间选择：在需要视觉线性时使用 lab/lch；在广色域设备上使用 display-p3 并提供 sRGB 回退。
• 一致性：保持设计工具与实现的色彩空间一致；为图片与字体设置正确的 MIME 与色彩标记。
• 兼容：对不支持的浏览器提供近似 sRGB 值或降级方案；通过特性查询控制层叠。

参考与验证

• MDN color-mix() 文档：https://developer.mozilla.org/docs/Web/CSS/color_value/color-mix
• CSS Color Module Level 4/5：https://www.w3.org/TR/css-color-4/
• web.dev 颜色函数指南：https://web.dev/articles/css-color-function