CSS颜色空间 lch/lab 在当前浏览器兼容性如何
作者：袖梨
2026-07-15
lch() 是当前唯一能稳定落地的 Lab 衍生函数；截至 2026 年 7 月，Safari 16.4+、Chrome 111+、Firefox 117+ 原生支持，但须带单位、注意 D50/D65 白点差异，且无自动降级。
lch() 是当前唯一能稳定落地的 Lab 衍生函数
截至 2026 年 7 月，lch() 在 Safari 16.4+、Chrome 111+、Firefox 117+ 中已原生支持，无需开启 flag，可直接用于生产环境——但必须带单位、注意白点差异、且不能依赖自动降级。
-
lch(70% 80 240deg)✅ 正确：L 和 C 必须带%，H 必须带deg（漏任一单位整条声明被静默忽略） -
lch(70 80 240)❌ 失效：无单位 → 浏览器跳过该行，回退到上一条颜色声明 - 设计师给的 LCH 值通常来自 Figma（D50 白点），而 CSS 使用 D65，直接套用会导致青绿区色相偏移 3–5°
-
@supports (color: lch(0% 0 0deg))可检测，但部分旧 Safari 版本存在误报，建议仅用于非关键装饰色
lab() 函数在所有主流浏览器中仍不可用
lab() 名义上写入规范，实际未落地：Chrome 曾需手动开启实验 flag，该 flag 已于 2025 年底移除；Firefox 和 Safari 官方路线图中无实现计划；Safari 甚至不解析 lab() 为合法颜色值。
-
color: lab(50% 20 10);→ Safari/Firefox/旧 Chrome 直接忽略整条声明，不是变灰，是“消失”，最终颜色取决于前一条有效声明（如color: #333;） -
@supports (color: lab(0% 0 0))在所有当前浏览器中均返回false，无法用于功能检测 - PostCSS 插件转出的
rgb()是静态降级，运行时与 Lab 无关，也不具备感知均匀性
oklch() 支持度略高但门槛更严
oklch() 基于 OKLab 空间，感知均匀性优于 lch()，但支持要求更高：Chrome 112+、Firefox 121+、Safari 17.4+（即 iOS 17.4+）才稳定启用。
-
oklch(60% 0.28 258.5deg)✅ 正确：C 必须是小数或百分比（28%或0.28），H 必须带deg -
oklch(60% 28 258.5)❌ 失效：C 缺单位 → 整条声明被丢弃 - 深色模式下用
oklch()调阶更可靠（L 变化≈人眼明暗变化），但混用hsl()或rgb()会导致插值退化为 sRGB，悬停动画出现灰紫带 - 自定义属性存
--primary: oklch(60% 0.28 258.5deg);对浏览器无意义，transition 仍走 sRGB 插值
color-mix(in lch) 是目前最稳妥的感知均匀混合方式
如果目标是生成 hover 色、禁用态或渐变中间色，color-mix(in lch, ...) 是唯一能在运行时保持感知均匀性的方案，但它有硬性约束。
立即学习“前端免费学习笔记（深入）”；
- 两个输入色必须同属
lch()：例如color-mix(in lch, lch(60% 70 240deg), lch(40% 60 240deg))✅；混用red或hsl()❌（整条声明失效） - 百分比权重必须显式带
%：lch(60% 70 240deg) 60%, lch(40% 60 240deg) 40%✅；写成60, 40❌ -
color-mix()自身支持晚于基础lch()，Safari 直到 17.5 才支持，旧版需 JS fallback
