in srgb混合快、兼容广但明度过渡不均，in oklch更符合人眼感知、灰阶平滑但需Safari 16.4+且两端必须同为oklch格式。
color-mix()里in srgb和in oklch的实际差异是什么？
选srgb还是oklch，不是“哪个更先进”，而是看你要解决的具体问题：srgb混合快、兼容广、结果可预测；oklch混合更符合人眼感知，尤其在明度过渡上更均匀，但代价是 Safari 16.4+ 才支持，且必须手动转色、不能用white/black简写。
常见错误现象：直接写color-mix(in srgb, #3a5fa8 70%, white 30%)，颜色没变——因为white不是字面量，in srgb虽合法，但权重缺失或颜色格式不对都会静默失效。
-
in srgb适合快速生成中间色，比如按钮悬停态：color-mix(in srgb, #2563eb 70%, #1e40af 30%)，所有现代浏览器都认，结果稳定 -
in oklch适合控制灰阶、做深浅变体，比如从品牌蓝生成中性灰：先用 DevTools 把#3a5fa8转成oklch(55.2% 0.215 252.3)，再混oklch(100% 0 0)（纯白）或oklch(0% 0 0)（纯黑） - 别混用：写
color-mix(in oklch, #3a5fa8 60%, oklch(0% 0 0) 40%)会整条失效——两端必须同为oklch()格式 -
in lch理论上更好，但 Safari 当前不支持in lch用于color-mix()，in oklch是更稳妥的感知均匀替代
为什么in srgb混合两个亮色会发灰？
sRGB 是非线性色彩空间，直接插值会压缩亮度。比如color-mix(in srgb, #ff0000 50%, #0000ff 50%)产出的是暗紫#7f007f，不是视觉居中的品红——这不是 bug，是数学结果。
真正影响 UI 的是人眼怎么“看”，而不是数值怎么“算”。如果你发现浅蓝混白后不够亮、深蓝混黑后发紫，说明你正在被 sRGB 的非线性坑住。
- 用
in oklch重试同一组颜色：color-mix(in oklch, oklch(53.2% 0.295 270.1) 50%, oklch(100% 0 0) 50%)，L 值线性提升，灰阶过渡平滑 - Chrome 和 Safari 对
in srgb解析一致，但 Firefox 默认按srgb-linear混合，同一行代码在 Firefox 里可能偏灰——显式声明in srgb能强制统一行为 - 不要靠眼睛调：用 Chrome DevTools 拾色器点选结果色块，看 LCH/OKLCH 数值是否等距变化，比肉眼判断可靠得多
@supports检测该用color-mix还是oklch？
检测color-mix()本身容易翻车：@supports (color: color-mix())语法非法，浏览器直接丢弃整块规则；而@supports (color: color-mix(in srgb, red, blue))虽可行，但 Firefox 112+ 才支持，旧版 Safari 仍忽略。
更稳的做法是检测基础色函数：@supports (color: oklch(0% 0 0))——它比color-mix()支持得更早、更统一，且只要 oklch 可用，color-mix(in oklch, ...)大概率也能用。
- 始终把 fallback 写在
@supports外层：color: #2563eb;放在前面，@supports块里再覆盖color: color-mix(...) - 顺序不能反：把
@supports块写在普通声明之前，某些早期 Chromium 版本会忽略后续声明 - 别用 UA 判断或 JS 检测——CSS 特性查询才是唯一原生、可靠、无 FOUC 的方案
混合白/黑时为什么不能直接用white或black？
因为white和black是命名色，在color-mix()里不被当作 oklch 空间下的极值处理。浏览器要求你显式写出oklch(100% 0 0)和oklch(0% 0 0)，否则报错Invalid color space in color-mix()。
这不只是语法限制——oklch(100% 0 0)明确表示“L=100%, C=0, h任意”，确保混合路径只动明度，不动色相和色度；而white在不同上下文可能映射到不同色域，不可控。
- 纯白必须写成
oklch(100% 0 0)，纯黑必须写成oklch(0% 0 0)，h 值可以省略或填 0 - 混入白/黑时，另一端颜色也必须是完整
oklch()格式，不能是#3a5fa8或hsl() - 百分比总和必须为 100%，写成
oklch(55.2% 0.215 252.3) 60%, oklch(100% 0 0) 40%才有效，漏掉任一%符号就静默失败
真正容易被忽略的是：你写的每一个color-mix()都是编译期静态计算，它不感知:hover、不响应@media、不随 CSS 变量更新——所谓“动态”，全靠你提前把所有分支条件手写死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
