如何在CSS Color 4中使用LCH颜色？

lch()函数在Chrome 111+、Firefox 117+、Safari 16.4+中真正可用，但行为不一致：Firefox 117+支持基础lch()，color-mix(in lch,)需Firefox 120+；Safari 16.4–17.3对单位宽松但L缺%即整条跳过；Chrome 111+自动clamp超色域值，Safari可能显示异常或透明；安卓WebView基本不支持。

lch()函数在哪些浏览器里真正可用

Chrome 111+、Firefox 117+、Safari 16.4+ 能解析 lch()，但行为不一致：Firefox 117+ 支持基础 lch()，但 color-mix(in lch, ) 要等到 Firefox 120+；Safari 16.4–17.3 对单位宽松，lch(70% 80 240deg) 可用，但 lch(70 80 240deg)（L 缺 %）整条被跳过；Chrome 111+ 会 clamp 超出 sRGB 的值（比如 lch(50% 150 240) 渲染成灰阶），Safari 可能显示异常或透明；所有安卓 WebView 基本不支持，@supports (color: lch(0% 0 0)) 在多数 WebView 中返回 false。

写错一个单位，整条声明就消失

lch() 不报错、不降级、不提示——它直接忽略整行 CSS。常见失效写法包括：

1. lch(70 80 240deg) —— L 缺 %（必须是 70% 或 0.7）
2. lch(70% 80% 240deg) —— C 多写了 %（C 是无量纲数值，80 合法，80% 非法）
3. lch(70% 80 240) —— H 缺 deg（必须显式写 240deg）
4. lch(0% 100 240deg) —— L=0% 或 100% 时 C 强制归零，lch(0% 100 240deg) 渲染为纯黑，不是“暗蓝”

用 lch() 做深色模式配色时的典型陷阱

设计师给的 LCH 值常来自 Figma（D50 白点），而 CSS 使用 D65 白点，青绿区色相偏移 3–5°，不能照搬；hsl(240, 100%, 20%) 在深色背景上几乎不可见（Y≈0.01），而 lch(25% 60 240deg) 才真正落在视觉暗度一致的档位；渐变中跨 0°/360° 插值（如 lch(60% 70 350deg) → lch(60% 70 10deg)）不会走短弧，中间段会塌陷成灰带；color-mix(in lch, ) 要求两个输入都严格是 lch() 格式，且百分比单位不能省：lch(60% 70 240deg) ✅，lch(60 70 240deg) ❌。

调试 lch() 时最常被忽略的三件事

DevTools 不显示真实 LCH 值，复制出来的永远是降级后的 sRGB 十六进制，靠它验证等于白忙；想确认是否生效，只能肉眼比对（比如和已知可靠的 #3a50e0 并排看）；color-mix() 和 oklch() 混用时，若混入 hsl() 或 rgba()，整个表达式因语法不一致被丢弃——不是部分失效，是整条无效。