如何在CSS中使用color-mix()混合颜色

color-mix() 仅在Chrome 111+/Edge 111+/Safari 16.4+原生支持，Firefox默认禁用；必须显式指定色彩空间、颜色字面量和带%的权重，缺一即静默失效。

color-mix() 不是“写了就能用”的函数——它只在 Chrome 111+、Edge 111+ 和 Safari 16.4+ 中原生可用，Firefox（截至 2026 年中）仍默认禁用且无计划启用；更关键的是，它不接受任何变量或 currentColor，必须写死颜色字面量 + 显式色彩空间 + 权重百分比。漏掉任一要素，浏览器就静默忽略整条声明，连控制台警告都没有。

为什么写了 color-mix() 却没效果？

常见失效不是语法错，而是环境或写法踩了硬限制：

1. color-mix(in srgb, var(--primary), blue) → 静默失败，var() 不被解析
2. color-mix(in srgb, red, blue) → 缺少权重，整条声明被丢弃（不是默认 50%/50%，是直接跳过）
3. color-mix(srgb, red 50%, blue 50%) → 漏写 in 关键字，无效
4. color-mix(in srgb, #ff0000 60%, #0000ff 30%) → 权重总和 ≠100%，解析失败（剩的 10% 无归属）
5. 在 Firefox 或旧 Safari 中使用 → 整条 CSS 声明被忽略，回退到上一个有效颜色值（可能完全不是你想要的）

怎么写才能让 color-mix() 真正生效？

必须同时满足三要素：显式色彩空间、字面量颜色、带 % 的权重。推荐按这个顺序组织代码：

1. 先写降级色：background-color: #2563eb;
2. 再用 @supports 包裹 color-mix() 声明：@supports (color: color-mix(in srgb, red, blue)) { ... }
3. 色彩空间优先选 in oklch（感知更均匀），次选 in srgb（兼容性略好）
4. 权重可写成 red 2, blue 1，浏览器会自动归一化（等价于 66.6%/33.3%），但建议统一用 % 避免歧义
5. 避免嵌套在复合属性里：background: color-mix(...) no-repeat; 会整体失效，拆成 background-color 单独声明

color-mix() 能做悬停动画吗？

不能。它只生成一个静态颜色值，比如 color-mix(in srgb, #3b82f6 85%, black 15%) 解析后就是 #2d5e9e，和手写十六进制没区别。给它加 transition 不会产生渐变效果，只会跳变。

1. 真要平滑过渡：先用 color-mix() 算出起止色，再手动转成 hsl() 或 oklch() 格式，最后靠 transition: color 插值
2. 例如：color: hsl(220, 80%, 30%); → color: hsl(220, 80%, 50%);，中间过程由浏览器线性插值
3. oklch() 插值更符合人眼，但需确认目标环境支持（Chrome 111+/Safari 16.4+/Firefox 117+）
4. 别指望 color-mix() 响应 :hover 或媒体查询动态变化——它在 CSS 计算阶段就固化了

最容易被忽略的实操细节

不是语法怎么写，而是它根本不是“运行时函数”：它没有变量、没有响应式、不参与层叠计算，只在样式解析时做一次静态运算。你以为的“动态调色”，实际是靠人工预设多组 color-mix() + @supports + 媒体查询硬编码实现的。真正需要实时混合（比如根据用户上传图片主色生成按钮悬停色），还是得靠 JS 解析、计算、注入内联样式——哪怕覆盖率差那 0.1%，生产环境里也得当它不存在。