color-mix() 是 CSS 颜色模块（CSS Color Module Level 5）中引入的一个强大的颜色混合函数，用于在指定的颜色空间中混合两种或多种颜色，生成新的颜色值。它解决了传统颜色混合（如通过透明度叠加）在视觉一致性上的不足，尤其在不同设备和颜色空间下能提供更可预测的结果。
基本语法
color-mix() 的核心语法如下：
color-mix(in <color-space>, <color-1> [<percentage>]?, <color-2> [<percentage>]?, ...)
in <color-space>：指定混合使用的颜色空间（必需）。常见值包括srgb、srgb-linear、oklab、oklch、lab、lch等。<color-1>,<color-2>, …：要混合的颜色（至少两种，支持多种），可以是任何有效的 CSS 颜色（如#fff、rgb(255,0,0)、CSS 变量等）。[<percentage>]?：可选参数，指定每种颜色在混合中的占比（默认按比例分配剩余份额）。
关键特性
-
基于颜色空间的混合
传统颜色混合（如rgba()叠加）本质是在默认颜色空间（通常是srgb）中进行简单的数值计算，可能导致视觉上的偏差（如混合红色和绿色得到的棕色与预期不符）。
color-mix()允许指定更科学的颜色空间（如oklab），该空间更符合人类视觉对颜色的感知，混合结果更自然。例如：/* 在 oklab 空间混合红色和绿色，结果更接近人眼预期的棕色 */ color: color-mix(in oklab, red 50%, lime 50%); -
灵活的比例控制
可以通过百分比精确控制每种颜色的占比，总占比超过 100% 时会自动按比例缩放。例如：- 混合 30% 红色和 70% 蓝色：
color-mix(in srgb, red 30%, blue 70%) - 若省略百分比，默认平均分配（如两种颜色各占 50%）：
color-mix(in srgb, red, blue)（等价于各 50%） - 多颜色混合时按比例分配：
color-mix(in srgb, red 20%, green 30%, blue 50%)（总和 100%）
- 混合 30% 红色和 70% 蓝色：
-
支持透明色（
transparent）
与透明色混合时，会按比例降低原颜色的不透明度。例如：/* 50% 红色 + 50% 透明 → 半透明红色 */ color: color-mix(in srgb, red 50%, transparent);
常用颜色空间及适用场景
不同颜色空间的混合效果差异较大，选择合适的空间很重要：
| 颜色空间 | 特点 | 适用场景 |
|---|---|---|
srgb | 网页默认颜色空间，基于非线性感知，混合结果可能偏暗 | 兼容旧系统，简单混合需求 |
srgb-linear | 线性版本的 srgb，混合时亮度更均匀 | 需要精确亮度计算的场景 |
oklab | 现代均匀颜色空间，感知一致性强，混合后色调和亮度过渡自然 | 追求自然视觉效果的设计 |
oklch | oklab 的圆柱坐标形式，便于控制色相、饱和度和明度 | 需要精确调整色相/饱和度时 |
lab, lch | 传统均匀颜色空间，覆盖范围广但计算复杂度高 | 专业色彩工作流 |
与传统混合方式的对比
rgba()叠加：本质是颜色在视觉上的叠加，受背景色影响，且混合逻辑不直观（如rgba(255,0,0,0.5)叠加rgba(0,255,0,0.5)会受背景色影响）。color-mix()：直接计算混合后的颜色值，不受背景影响，结果可预测，且支持多颜色、多空间混合。
浏览器兼容性
color-mix() 目前已被主流浏览器支持（Chrome 99+、Firefox 111+、Safari 15.4+），但旧浏览器（如 IE）不支持。实际使用时可通过工具（如 PostCSS）降级处理，或提供 fallback 颜色：
.my-element {/* 降级方案：使用半透明红色 */color: rgba(255, 0, 0, 0.5);/* 现代浏览器使用 color-mix */color: color-mix(in oklab, red 50%, transparent);
}
总结
color-mix() 是 CSS 中处理颜色混合的现代方案，通过指定颜色空间和比例，能生成更符合视觉预期、可预测的颜色。它特别适合主题设计、动态颜色生成（如 hover 效果）、渐变色优化等场景，是前端开发者提升色彩控制能力的重要工具。
)
