lab()和lch()不能直接稳定使用——lab()仅chrome/edge 111+、safari 16.4+支持，firefox完全不支持；lch()支持稍好（chrome 111+、firefox 117+、safari 16.4+），但参数单位缺一不可，且需手动降级、注意白点差异与色域限制。
lab() 和 lch() 在 CSS 中**不能直接当作稳定可用的函数来用**——当前（2026 年 5 月）只有部分浏览器支持，且支持程度差异极大；盲目写 lab(50% 20 10) 或 lch(70% 80 240)，在 Firefox、旧 Safari、多数安卓 WebView 里会静默失效，不是变灰，是整条声明被跳过。
lab() 函数在哪些浏览器里真能用
Chrome/Edge 111+ 和 Safari 16.4+ 原生支持 lab()，Firefox **完全不支持**（截至 2026 年中）。这意味着：
-
color: rgb(100, 100, 100); color: lab(53.2% -0.4 1.2);—— Firefox 忽略第二条，只渲染rgb() -
@supports (color: lab(0% 0 0)) { ... }在 Firefox 里始终为 false，无法用于功能检测 - 即使 Chrome 支持，a/b 超出 ±125 时行为不一致：Chrome 自动 clamp，Safari 可能渲染异常或透明
- CSS 预处理器（如 Sass）若未更新语法解析器，会直接报错
Invalid CSS after "lab(50%": expected expression
lch() 比 lab() 更实用，但降级逻辑必须手写
lch() 支持度略好于 lab()：Chrome 111+、Firefox 117+、Safari 16.4+ 均可识别。但它仍面临三个硬性限制：
- 参数单位缺一不可：
lch(70% 80 240)❌（C 缺单位），lch(70% 80 240deg)✅ - L 是 CIE Lightness（0%=黑，100%=白），不是线性亮度；L=0% 或 100% 时 C 强制归零，和 HSL 的
lightness: 0%还能有饱和度完全不同 - 设计师给的 LCH 值大概率来自 Figma（默认 D50 白点），而 CSS 使用 D65，直接照搬会导致色相偏移 3–5°，尤其青绿区明显
- 不能依赖
@supports (color: lch(0 0 0))全量切换主题——部分 Safari 版本存在误报，建议仅用于非关键装饰色
color-mix(in lch, ...) 是目前最稳妥的感知均匀混合方式
如果你的目标是做颜色混合（比如推导 hover 色、禁用态、渐变中间色），color-mix() + in lch 是当前唯一能落地的方案，但必须严格满足条件：
- 两个输入色必须同属
lch()空间：color-mix(in lch, lch(60% 70 240), lch(40% 60 240))✅；混用red或hsl()❌（整条声明被忽略） - 百分比必须带
%：lch(60% 70 240) 60%, lch(40% 60 240) 40%✅；写成60, 40❌ -
color-mix()本身支持晚于基础lch()，Safari 直到 17.5 才支持，旧版需 JS fallback 或放弃 - 别用自定义属性存 LCH 值：
--c1: lch(60% 70 240);对浏览器无意义，也无法被 JS 读取计算
真正容易被忽略的点是：你看到的 DevTools 里显示的 lch() 值，其实是浏览器内部转换后的 sRGB 十六进制，不是原始值；想验证是否生效，只能靠视觉比对 + 实机测试，尤其是深色背景下的灰阶过渡是否均匀。一旦涉及动画或渐变，务必确认所有节点都用同一色彩空间书写，否则插值会悄悄退化成 sRGB。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
