CSS颜色空间 lch/lab 在当前浏览器兼容性如何

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

真正卡住落地的从来不是函数名是否写着“lab”，而是每一处声明、每一次混合、每一个 transition 是否全程锚定同一色彩空间——漏掉一个点，感知一致性就断了。