能用但需兼容处理：chrome/edge 111+、safari 16.4+ 原生支持，firefox 不支持；lab() 基于人眼感知均匀色空间，明度l与色度a/b更符合视觉差异，适用于灰阶控制、可访问性对比度及自然颜色插值，需回退rgb()、@supports检测并截断a/b值。
lab() 函数在 CSS 中到底能不能用？
不能直接用，lab() 是 CSS Color Level 4 提案里的函数，目前仅 Chromium 111+（Chrome/Edge 111+、Opera 97+）和 Safari 16.4+ 原生支持，Firefox 完全不支持（截至 2024 年中），且需开启实验性功能或依赖 polyfill。
这意味着：写 color: lab(50% 20 10); 在 Firefox 里会被忽略，旧版 Chrome 会报解析错误或静默降级——不是“不生效”，而是“压根不认识这个语法”。
为什么非要用 lab()？它比 rgb() 和 hsl() 强在哪？
lab() 是面向人眼感知的均匀色空间，L 表示明度（0=黑，100=白），a 和 b 是色度轴（a 正向偏红、负向偏绿；b 正向偏黄、负向偏蓝），数值变化和人眼感知的色彩差异基本成正比。
而 rgb() 是设备相关、非线性，hsl() 明度与感知明度严重脱节（比如 hsl(0, 100%, 50%) 是纯红，但视觉上比 hsl(120, 100%, 50%)（纯绿）暗得多）。
立即学习“前端免费学习笔记（深入）”；
所以当你需要：
- 精确控制灰阶过渡（比如深色模式下从 #1e1e1e → #2d2d2d 的明度差刚好 ΔL=5）
- 做可访问性对比度微调（WCAG 要求 ΔL ≥ 15 才算“明显区别”，lab() 可直算）
- 在 JS 中做颜色插值（lch() 或 lab() 插值得到的中间色更自然）
这时候绕不开 lab()。
怎么安全地在项目里用 lab()？
别指望全局启用，得按场景兜底：
- 对关键文本/按钮色，用
color: rgb(128, 128, 128); color: lab(53.2% -0.4 1.2);—— 后声明覆盖前声明，现代浏览器用lab()，老浏览器回退到rgb() - 用
@supports (color: lab(0% 0 0))包裹增强样式（比如高对比度焦点环），避免在不支持的浏览器里触发无效规则 - 若需 JS 动态计算，别手写转换，用 colorjs.io 或
culori库，它们把 sRGB ↔ LAB 的非线性变换、D65 白点适配都封装好了，自己实现极易出错 - 注意：CSS 中
lab()默认白点是 D65，但某些设计工具（如 Figma）导出可能用 D50，数值直接照搬会导致偏色
容易被忽略的坑：lab() 的 a/b 值没有固定范围
lab() 的 a 和 b 理论上无界（比如荧光色 a 可达 ±128），但不同浏览器对超限值处理不一致：
- Chrome 允许 a=-200，自动 clip 到有效范围并渲染
- Safari 对 a/b > ±125 会静默转成透明或错误色
- CSS 预处理器（如 Sass）若未更新语法解析器，可能直接报错
Invalid CSS after "lab(50%": expected expression
所以生产环境务必验证 a/b 是否落在 [-125, 125] 内，可用 Math.max(-125, Math.min(125, a)) 截断，别信“设计稿给的数一定合法”。
LAB 的价值不在炫技，而在你真正需要感知一致的颜色操作时，它不骗人——但前提是，你清楚它在哪能跑、怎么不崩、以及谁根本看不见它。
