oklab() 是目前唯一能在 css 中稳定使用的感知均匀颜色函数，lab() 因无浏览器实现而完全不可用；oklab() 参数必须为小数形式且 a/b 控制在 ±0.5 内，仅适用于 color-mix、color-contrast 等场景，不支持 transition 或 gradient 插值。
oklab() 是唯一能用的，lab() 在任何浏览器里都不生效 —— 不是“慎用”，是根本不能写。
为什么 lab() 函数在 CSS 里完全不可用
你写 color: lab(50, 20, -10); 或 drop-shadow(lab(50, 20, -10))，所有主流浏览器（Chrome 112+、Firefox 121+、Safari 17.5、Edge 114+）都会直接跳过整条声明，不报错、不警告、也不 fallback。DevTools 的 computed 样式里压根看不到这个值，它就像没写过一样。
-
lab()虽然写进了 CSS Color Level 4 规范，但截至 2026 年 8 月，没有任何浏览器实现它；Chrome 曾有的实验 flag#enable-web-platform-features已于 2025 年底移除 - PostCSS 插件（如
postcss-color-functional-notation）无法转译lab()，因为没有标准映射规则；它只处理oklab()和oklch() - 哪怕你在设计工具里导出的是 Lab 值，也必须先转成 OKLab（注意白点：D50 → D65 归一化），否则色偏明显
oklab() 的实际可用场景和硬性约束
oklab() 是目前唯一能在 CSS 中稳定参与颜色计算的感知均匀空间函数，但它不是“随便写就能跑”——参数错一个单位，整条规则就静默失效。
- 必须写成
oklab(0.5 0.2 -0.1)这种形式：L 是 0–1 小数，a/b 是无量纲浮点数（oklab(50% 20 -10)❌） - a/b 建议控制在
|a| ≤ 0.5、|b| ≤ 0.5内；超出后 Chrome 开始降饱和，Safari 可能截断 - 可用于
color-mix(in oklab, ...)、color-contrast()，以及 Safari 17.5+ 实验性color-adjust()，但filter: drop-shadow(...)中必须用完整语法：drop-shadow(0 2px 4px oklab(0.3 0.15 -0.2)) - 不能用于
transition或gradient插值——浏览器仍按 RGB 算，oklab()只是起点/终点标签
项目中该选 oklab() 还是 lch()/oklch()
选 oklab() 仅当你要做线性混合或明度/色度解耦计算；日常配色、渐变、禁用态调整，oklch() 更直观、更安全。
-
oklab()适合：多色混合（color-mix(in oklab, ...)）、算法调色（比如根据亮度自动调整 a/b）、滤镜链路中保持中间值语义精度 -
oklch()更适合：设计师调色（H 是角度，C 是色度，L 是亮度）、渐变（但需手动拆段防色相绕远）、禁用态（固定 H，只降 C）、深色模式适配（固定 H/C，只调 L） -
lch()兼容性略好（Chrome 111+/Safari 16.4+），但感知均匀性弱于 OKLab，蓝紫/黄绿区插值易发灰 - 三者都不能替代 fallback：必须写
color: #3b82f6; color: oklch(60% 0.28 258.5);，且@supports检测要放在降级色之后
真正容易被忽略的点不在函数名，而在白点归一化和 a/b 数值范围——OKLab 值从设计工具来，必须确认是 D65；手算或 JS 转换时，a/b 超出 ±0.5 就可能在 Safari 上突然变灰，而你根本收不到任何提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
