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。常见失效写法包括：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
lch(70 80 240deg)—— L 缺 %（必须是70%或0.7） -
lch(70% 80% 240deg)—— C 多写了 %（C 是无量纲数值，80合法，80%非法） -
lch(70% 80 240)—— H 缺deg（必须显式写240deg） -
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()，整个表达式因语法不一致被丢弃——不是部分失效，是整条无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
