color-mix() 在 sRGB 中线性插值不等于视觉等比融合，因 sRGB 非线性导致混色发灰；需改用 oklch 空间并显式写百分比，配合兜底色和 @supports 检测确保兼容性。
color-mix() 不能直接“等比融合”两种品牌色并保证视觉中性——它只是按数值权重线性插值，结果取决于色彩空间。你写 color-mix(in srgb, #2563eb 50%, #ef4444 50%)，得到的是暗浊紫（#89557a），不是人眼觉得“居中”的品红。
为什么 color-mix(in srgb, ...) 等比不等于视觉等比
在 srgb 空间里，颜色通道是非线性的，直接加权平均会压低亮度、降低饱和度。两个高饱和品牌色（比如蓝 #2563eb 和红 #ef4444）对半混合后，中间色发灰、偏暗，失去原有活力。
-
srgb插值适合技术校准，不适合 UI 色彩直觉 - 想让过渡“看起来均匀”，必须换空间：优先用
in lch或in oklch -
oklch在 Chrome/Edge 111+ 和 Safari 16.4+ 支持，但 Firefox 仍不认（截至 2026 年中） - 你得先把品牌色转成
oklch(L C h)格式，再混合——不能写oklch(…)却混#2563eb
怎样写出真正视觉居中的等比融合
拿 #2563eb（Tailwind 蓝）和 #ef4444（Tailwind 红）为例：
- 用 Chrome DevTools 颜色拾取器或 ColorBox 把它们转成
oklch：#2563eb→oklch(0.58 0.29 258.3)#ef4444→oklch(0.62 0.27 24.1) - 等比混合写法：
color-mix(in oklch, oklch(0.58 0.29 258.3) 50%, oklch(0.62 0.27 24.1) 50%) - 结果更亮、更饱和，色相居中感更强（LCH 角度差约 234°，插值后约 141°，接近青绿）
- 注意：百分比必须显式写
50%，不能省略；in oklch不可替换为in srgb
浏览器不支持时怎么不崩
color-mix() 在 Firefox 默认禁用，Safari 旧版不解析，Chrome 旧版静默忽略——写了没 fallback 就是裸奔。
立即学习“前端免费学习笔记（深入）”；
- 永远把静态色写在前面：
color: #89557a; color: color-mix(in oklch, ...); - 用
@supports包裹整块逻辑，但别只测语法：@supports (color: color-mix(in oklch, red, blue))只能说明函数被识别，不能保证权重或空间有效 - 关键语义色（如错误态、成功态）绝不能只靠
color-mix()输出——它一旦失效，就只剩兜底色 - 不要把
color-mix()塞进background复合属性：background: color-mix(...) no-repeat;整条声明会失效；拆成--mixed: color-mix(...); background-color: var(--mixed);
能不能响应式动态调比例
不能。color-mix() 不接受 CSS 变量、不响应 :hover、不参与 transition——它就是一个编译期求值函数，输出固定颜色值。
- 所谓“动态”，只能靠构建时预计算（PostCSS 插件）或运行时 JS 更新
style.setProperty() - 纯 CSS 方案只有硬编码断点：
@media (prefers-color-scheme: dark) { :root { --mix-ratio: 30%; } }，再拼成color-mix(in oklch, ..., 30%, ... 70%) - 别指望用
calc()算比例再塞进color-mix()——CSS 不支持嵌套计算 - 如果真要悬停渐变，得先用
color-mix()算出起点色和终点色，再转成oklch()或hsl()格式交给transition
真正的难点不在怎么写，而在于：你每写一个 color-mix()，都得确认三件事——颜色是不是字面量、空间名有没有拼错、权重有没有漏 %。少一个，整个声明就消失，还不会报错。
