color-mix() 中使用 lch() 不报错而是被忽略，因旧版浏览器不支持 lch()/oklch()；需用 @supports (color: lch(0% 0 0)) 检测并包裹，且混合色空间必须一致，fallback 颜色须写在 @supports 外部以确保降级可靠。
color-mix() 里用 lch 而不是 rgb 会直接报错？
不是报错，是被忽略——浏览器不认识 lch() 就当整个 color-mix() 声明无效，退回到上一条颜色规则。Chrome 111+、Safari 16.4+、Firefox 119+ 才开始支持 lch() 和 oklch() 作为 color-mix() 的色彩空间参数；旧版本哪怕写了也白写。
实操建议：
- 必须配合
@supports (color: lch(0% 0 0))做包裹，不能只靠@supports (color-mix: oklch(0% 0 0) 50%, red)—— 后者在 Safari 16.4 之前根本不存在，检测不到就全跳过 -
color-mix()的色彩空间必须和两个混合色的色彩空间一致：比如color-mix(in lch, lch(50% 100 270), lch(50% 100 90))才合法；混用rgb()和lch()会导致解析失败 - 别在
:root里直接定义--main: color-mix(in oklch, ...)然后全局复用——部分浏览器（如旧版 Safari）对自定义属性里的函数解析更保守，优先写在具体选择器里
@supports 检测 oklab 时为什么始终返回 false？
因为 oklab() 函数本身不被支持，不代表 oklch() 或 color-mix() 不可用。目前（2024 年中）只有 Chrome 117+ 支持 oklab(0.5 0.1 0.1)，而 oklch() 支持早一两个大版本。检测要拆开：
- 用
@supports (color: oklch(0% 0 0))判断基础色彩空间是否可用 - 用
@supports (color-mix: oklch(0% 0 0) 50%, red)单独判断混合能力（Firefox 119+ 才加） -
@supports (color: oklab(0 0 0))在绝大多数当前主流浏览器里仍为 false，别拿它当兜底依据
常见错误现象：把 oklab 当成 oklch 的“同级替代”来检测，结果所有浏览器都 fallback 到 sRGB，失去感知色相/饱和度变化的能力。
立即学习“前端免费学习笔记（深入）”；
fallback 颜色写在 supports 外面还是里面？
写在外面。CSS 是从上到下解析的，先声明一个安全的 sRGB 颜色，再用 @supports 覆盖它，才能保证降级可靠。
button {
background-color: #4a5568; /* fallback */
}
@supports (color: oklch(0% 0 0)) {
button {
background-color: color-mix(in oklch, oklch(60% 0.2 240), oklch(40% 0.3 300));
}
}性能影响很小，但顺序反了（比如把 @supports 块写在前面）会导致某些浏览器（特别是早期 Chromium）忽略后续的普通声明，最终没颜色。
- 不要用
@supports not (...)写 fallback 块——not在部分安卓 WebView 中解析异常 - 如果同时要兼容
lch和oklch，分开写两个@supports块，别用逗号“或”逻辑，浏览器对复合条件的支持不稳定 - 变量名如
--primary不能在@supports外部定义后，在内部用var(--primary)引用新计算值——CSS 自定义属性不支持跨 supports 作用域动态更新
为什么用了 oklch 还是看不出色相过渡效果？
大概率是用了太小的色相差，或者没关掉系统色彩管理干扰。oklch 的 h 是 0–360 度，但人眼对蓝紫（240–300°）和红（0–30°）之间的过渡最敏感，中间段（比如 120°→150°）看起来几乎没变。
- 测试时用极端值：
oklch(70% 0.4 0)（红）→oklch(70% 0.4 240)（蓝），比120 → 180更容易验证是否生效 - macOS 上 Safari 可能受“True Tone”或“Color Profile”影响，真机调试务必关掉这些系统设置
- 设计工具（Figma/Sketch）默认不渲染 oklch，看到的预览色 ≠ 实际 CSS 渲染色，必须在真实浏览器里验证
最常被忽略的一点：oklch 的 chroma（第二参数）不是“饱和度百分比”，而是绝对色度值，0.1 和 0.4 的视觉差异远大于 rgb 的 10% 和 40%，调的时候得大胆些。
