CSS颜色空间lch/lab浏览器兼容性现状

在CSS颜色空间的演进过程中，lch() 是目前唯一能够稳定投入实际使用的Lab衍生函数。截至2026年7月，Safari 16.4及以上、Chrome 111及以上、Firefox 117及以上版本已提供原生支持，无需开启实验标志即可在生产环境中直接使用。然而，存在若干关键限制：必须携带单位、需留意白点差异、以及无法依赖自动降级机制。接下来将逐一详细分析。

lch() 是目前唯一能稳定应用于生产环境的 Lab 衍生函数

截至2026年7月，lch() 在 Safari 16.4+、Chrome 111+、Firefox 117+ 中已获得原生支持，无需开启任何实验标志，可直接用于实际项目——但必须注意单位规范、白点差异，且不能依赖自动降级策略。

• 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曾需要手动开启实验标志，该标志已于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才支持，旧版需要使用JavaScript进行降级处理

真正阻碍落地的从来不是函数名是否包含“lab”，而是每一处声明、每一次混合、每一个transition是否全程锚定同一色彩空间——只要漏掉一个环节，感知一致性就会断裂。