color-mix() 目前仅 Chrome 111+ 和 Safari 15.4+ 原生支持，Firefox 不支持；不接受 CSS 变量作颜色参数，必须用字面量；混合空间（如 in srgb）不可省略，权重总和须为100%；推荐 in lch/oklch 获得更自然过渡；纯 CSS 响应式需配合 calc() 与媒体查询预设比例；替代方案如 oklch 透明度调节或渐变更稳妥。
color-mix() 不能在所有浏览器里直接用
目前只有 Chrome 111+ 和 Safari 15.4+ 原生支持 color-mix()，Firefox 完全不支持（截至 2024 年中），而且它不接受 CSS 变量作为颜色参数——这意味着你不能写 color-mix(in srgb, var(--primary), var(--secondary))，会直接报错 Invalid property value。
常见错误现象：开发者复制了 MDN 上的示例代码，却在本地看到文字没变色、控制台静默失败，其实是浏览器根本没解析这个函数。
- 必须用具体颜色字面量，比如
#ff6b6b、hsl(200 100% 50%)、rebeccapurple - 混合空间限定词（如
in srgb）不可省略，漏写会导致整个声明无效 - 百分比权重加起来必须等于 100%，写成
color-mix(in srgb, red 60%, blue 30%)会失败（只剩 10% 未分配）
怎么写出可预测的中间色，而不是“看起来差不多”
color-mix() 的结果高度依赖色彩空间。用 in srgb 混合两个亮色，可能得到发灰的中间值；换成 in lch，亮度和色相过渡更均匀，更适合 UI 渐变控制。
例如：color-mix(in srgb, #ff0000 50%, #0000ff 50%) 得到的是暗紫（#7f007f），不是视觉居中的品红——因为 sRGB 是非线性空间，直接插值会压低亮度。
- 要获得更自然的 UI 过渡，优先试
in lch或in oklch（后者在 Safari 16.4+ 支持） -
in lch下，color-mix(in lch, lch(50% 100 30) 50%, lch(50% 100 210) 50%)能稳定产出高饱和、等亮度的中间色 - 别依赖人眼判断：用 DevTools 的拾色器点选结果色块，看具体 LCH 或 OKLCH 数值是否线性变化
想响应式切换混合比例？得靠 CSS 自定义属性 + calc() 配合
color-mix() 本身不接受变量，但你可以把比例逻辑提前算好，再塞进固定字符串里——这需要 JS 或构建时处理。纯 CSS 方案只能靠预设断点 + 媒体查询硬编码。
比如实现“深色模式下主色调向背景偏移 20%”，不能写 color-mix(in oklch, var(--theme), color-contrast(var(--bg)) 20%)（语法非法），只能：
- 定义两套明确比例：
--mix-ratio: 80%和--mix-ratio: 60% - 用媒体查询切换：
@media (prefers-color-scheme: dark) { :root { --mix-ratio: 60%; } } - 然后在使用处拼接：
color-mix(in oklch, #4a6fa5 calc(var(--mix-ratio) * 1), #1e293b calc((100% - var(--mix-ratio)) * 1))
注意：calc() 里必须保证单位一致（都用 %），且乘法因子是纯数字，calc(var(--mix-ratio) * 1) 是安全写法，calc(var(--mix-ratio) * 0.01) 会因单位冲突失效。
替代方案比硬扛 color-mix() 更实际
如果你的目标只是“按钮悬停时平滑变色”或“主题色动态微调”，color-mix() 往往是杀鸡用牛刀。现代 CSS 有更稳的路径：
- 用
color: oklch(from var(--primary) l c h / calc(1 - var(--hover-alpha)))调透明度，再叠一层背景色模拟混合效果 - 对渐变按钮，直接用
background: linear-gradient(to right, var(--start), var(--end))，比多次color-mix()更可控 - 需要算法级混合（比如根据用户输入实时计算）？老实用 JS 计算 RGB/LCH 值，再注入 style 或 CSS 变量（虽然不能传进
color-mix()，但可直接赋给color）
真正卡住的点往往不是“怎么写对”，而是“为什么结果和设计稿差一截”——这时候大概率是色彩空间选错了，或者浏览器根本不认这个函数，先打开 DevTools 的渲染面板确认是否解析成功，比调参数更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
