color-mix()目前仅chrome 111+、edge 111+和safari 16.4+原生支持，firefox完全不支持；必须显式指定色彩空间（如in srgb）并为每种颜色提供百分比，否则无效。
color-mix() 在哪些浏览器能用
目前只有 Chrome 111+、Edge 111+ 和 Safari 16.4+ 原生支持 color-mix()，Firefox 完全不支持（截至 2024 年中）。如果你在开发中发现颜色没变化，先检查 console 是否报错 Invalid property value——这大概率是浏览器不认这个函数。
它不是 CSS 预处理器函数（比如 Sass 的 mix()），而是原生 CSS 函数，必须写在支持的属性值里，例如 background-color 或 color。
color-mix() 的基本语法和参数顺序
函数签名是 color-mix(in <colorspace>, <color-1><percentage>, <color-2><percentage>)</percentage></color-2></percentage></color-1></colorspace>。注意三点：
-
in <colorspace></colorspace>必须指定，常见可选值是srgb、lab、lch；省略会直接无效 - 两个颜色必须各自跟一个百分比（如
red 60%, blue 40%），不能只写一个百分比，也不能省略 - 百分比总和不必等于 100%，浏览器会自动归一化；但写成
red 1, blue 2这种无单位数字会被忽略，必须带%
示例：color-mix(in srgb, #ff0000 70%, #0000ff 30%) 混合出偏红的紫，而 color-mix(in lch, hsl(0 100% 50%) 50%, hsl(240 100% 50%) 50%) 在感知均匀空间里更自然。
为什么用 lab 或 lch 比 srgb 更合理
srgb 是设备相关空间，线性混合容易产生灰暗、发脏的结果，尤其在饱和色之间过渡时。而 lab 和 lch 是感知均匀空间，混合后明度、彩度变化更符合人眼直觉。
比如混合 red 和 lime：
color-mix(in srgb, red 50%, lime 50%); /* 得到偏黄褐的浑浊黄 */ color-mix(in lch, red 50%, lime 50%); /* 更鲜亮、更接近中间调的黄绿色 */
实际项目中，如果目标是 UI 渐变锚点、主题色推导或无障碍对比度微调，优先选 lch；仅需快速原型且兼容性允许时，srgb 可用但需预览验证。
color-mix() 不能替代变量或 calc() 的地方
它不能嵌套在 var(--c1) 里动态计算（CSS 不支持函数内展开自定义属性），也不能和 calc() 混用（比如 color-mix(in srgb, red calc(50% + 10%), blue 50%) 会报错）。
常见误用场景：
- 想用 JS 动态改百分比 → 必须通过内联样式或 CSS 自定义属性 +
@property（且仅限已注册的color类型） - 想混合三个及以上颜色 →
color-mix()只接受两个输入，需链式调用，如color-mix(in lch, color-mix(in lch, a 50%, b 50%) 50%, c 50%) - 混入透明色（如
rgba(0,0,0,0.5)）→ alpha 不参与混合，结果仍是不透明色；如需透明度叠加，得用background: color-mix(...) / 0.8这类新式语法（需额外支持）
真正要用好它，得把色彩空间选择、浏览器支持、静态/动态需求一起权衡——它很轻量，但不是万能胶。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
