如何在现代CSS中使用color-mix()函数混合两种颜色？-css教程-PHP中文网

color-mix()截至2024年中尚未在任何主流浏览器中实现，Chrome、Firefox、Safari均未支持，即使启用实验性flag也仅限Canary极简验证，生产环境必须用hsl()/lch()手动插值或Sass mix()等替代方案。

如何在现代css中使用color-mix()函数混合两种颜色？

color-mix() 目前（截至 2024 年中）**尚未在任何主流浏览器中实现**，直接使用会静默失败或报 invalid property value 错误。它只是 CSS Color Module Level 5 的草案函数，别被 MDN 上的“Experimental”标记误导——那不代表已落地。

为什么 `color-mix()` 现在用不了

Chrome、Firefox、Safari 均未启用该函数，即使加了 -webkit- 或 -moz- 前缀也无效。CSS 解析器遇到不认识的函数会直接丢弃整条声明，不会 fallback，也不会报错到控制台（除非你在 DevTools 里手动编辑样式并看到 invalid 提示）。

常见错误现象：

写成 background: color-mix(in srgb, red 50%, blue 50%); → 元素背景保持透明或继承值
用 PostCSS 插件（如 postcss-color-mix）但没配置好编译流程 → 输出仍是原样，浏览器照样忽略
误以为 Can I Use 上标“Partial support”代表可用 → 实际仅指部分引擎在 flag 下极早期实验，不具生产意义

替代方案：用 `hsl()` 或 `lch()` 手动插值更可控

真正稳定、跨浏览器的做法是自己计算中间色。比如混合 #ff0000 和 #0000ff 得到紫色，与其等 color-mix()，不如用 hsl() 做线性插值：

/* 红：hsl(0, 100%, 50%)，蓝：hsl(240, 100%, 50%) → 中点取 hsl(120, 100%, 50%) 即绿色？不对！*/  
/* 实际应按色相环最短路径插值：从 0° 到 240° 是顺时针 240°，但逆时针是 -120°，选更小角度 */  
/* 正确中点色相 = 0 + (-120) * 0.5 = -60° → 转为 300° → hsl(300, 100%, 50%) = #ff00ff（品红）*/

要点：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

hsl() 插值必须归一化色相（处理 0/360 跨界），否则得到奇怪的黄绿色
lch() 更符合人眼感知（推荐用于 UI 渐变），但 Safari 16.4+ 才开始支持，旧版需降级到 lab() 或 rgb()
工具链中可用 Sass 的 mix($a, $b, $weight)（基于 RGB）或 PostCSS 插件 postcss-color-function（转译 color() 函数）

如果真想尝鲜：只在 Chromium Canary + flag 下测试

仅限验证概念，不可用于项目：

启动 Chrome Canary 加参数：chrome --enable-blink-features=ColorMixFunction
必须指定颜色空间：in srgb、in lch 或 in oklch，漏写即无效
权重必须显式写百分比：red 60%, blue 40% 合法；red, blue（默认 50/50）目前不支持
不能嵌套：color-mix(..., color-mix(...)) 会解析失败

示例（仅 Canary 有效）：color: color-mix(in oklch, oklch(0.8 0.2 270) 70%, oklch(0.3 0.1 90) 30%);

真正要注意的是：颜色混合不是简单平均 RGB，不同色彩空间结果差异极大；而 color-mix() 的语义依赖于空间选择——你选 srgb 还是 oklch，出来的灰度过渡是否自然，比能不能写出来重要得多。先想清楚要模拟物理颜料混合（用 lch），还是屏幕光叠加（srgb），再决定怎么算。