首页 > 网页制作 >CSS颜色空间lch/lab当前浏览器兼容性如何？

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

来源：互联网 2026-07-18 08:27:04

截至2026年7月，lch()在Safari16.4+、Chrome111+、Firefox117+中已原生支持，但需带单位并注意D50与D65白点差异；lab()在所有主流浏览器中不可用；oklch()支持门槛更高；color-mix(inlch)是运行时保持感知均匀性的稳妥方案。

在CSS颜色空间的演进中，lch() 是目前唯一能稳定落地的Lab衍生函数。截至2026年7月，Safari 16.4+、Chrome 111+、Firefox 117+ 已经原生支持，可以直接用于生产环境——但有几个硬性门槛：必须带单位、注意白点差异、且不能依赖自动降级。下面逐一拆解。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

截至2026年7月，lch() 在 Safari 16.4+、Chrome 111+、Firefox 117+ 中已原生支持，无需开启 flag，可直接用于生产环境——但必须带单位、注意白点差异、且不能依赖自动降级。

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() 基于 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 插值

如果目标是生成 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