lab() 在 css 中完全不可用，因主流浏览器均不支持：chrome 已移除实验开关，firefox 无实现计划，safari 静默丢弃；lch() 是唯一可落地替代方案，已获三大浏览器原生支持，且 l 值直接对应感知亮度。
lab() 在 CSS 中无法用于保持感知亮度一致性——它不被任何主流浏览器原生支持，写 color: lab(60% 0 0); 会被直接忽略，连 fallback 都不会触发。
为什么 lab() 在 CSS 中根本不可用
截至 2026 年 7 月：
- Chrome 已移除 chrome://flags/#css-lab-color 实验性开关，lab() 函数不再可启用
- Firefox 官方路线图无任何实现计划，@supports (color: lab(0% 0 0)) 永远返回 false
- Safari 完全未解析该函数名，DevTools 中既不显示计算值，也不报错，整行声明静默丢弃
- PostCSS 插件（如 postcss-color-lab）能转译，但输出的是静态 rgb()，和 Lab 的“感知一致性”无关，只是预计算结果
lch() 是唯一可落地的替代方案
lch() 已在 Chrome 111+、Safari 16.4+、Firefox 117+ 原生支持，且参数设计天然适配亮度控制：
- L 值直接对应 CIE Lightness（0% = 黑，100% = 白），同一 L 下不同色相视觉明暗更接近一致
- 必须显式写单位：lch(60% 40 240) ✅，lch(60 40 240) ❌（缺 %，全平台失效）
- C（色度）无固定上限，但实际建议 ≤ 0.28（小数形式）或 ≤ 28（整数形式），避免跨设备 clamp 行为差异
- 白点默认 D65，若从 Figma（D50）导出数值，需用库如 culori 转换，否则青绿色相偏移明显
兼容性降级必须手动写，且顺序不能错
CSS 不支持函数级 fallback，必须靠声明顺序覆盖：
- 正确：color: rgb(102, 97, 235); color: lch(62% 55 258.5); → 老浏览器取 rgb()，新浏览器用 lch()
- 错误：color: lch(62% 55 258.5); color: rgb(102, 97, 235); → 所有不支持 lch() 的浏览器最终用 rgb()，但新浏览器反而被覆盖成旧色
- @supports 只能用于非关键装饰，例如焦点环：@supports (color: lch(0% 0 0)) { :focus-ring { color: lch(85% 0 0); } }
- 切忌在 CSS 变量里存 --primary: lch(62% 55 258.5); —— 浏览器当字符串处理，JS 读不出数值，也无法参与计算
真正难的不是选哪个函数，而是让同一 L 值在不同设备上被渲染成相近视觉重量。这要求你：始终用 lch() 定义主色、禁用 opacity 控灰、所有图片嵌入 sRGB profile，并在关键组件上用 color(srgb ...) 强制锁定渲染路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
