color-mix()截至2024年中尚未在任何主流浏览器中实现，Chrome、Firefox、Safari均未支持，即使启用实验性flag也仅限Canary极简验证，生产环境必须用hsl()/lch()手动插值或Sass 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（品红）*/
要点：
-
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），再决定怎么算。
