lch()生成感知均匀主题色需严格遵循cie lab*明度轴建模，仅在新版chrome/firefox/safari生效；单位错误（如l缺%、c误加%、h缺deg）会导致整条css静默失效，引发上线后颜色异常。
lch()能生成感知均匀的主题色，但必须严格按 CIE L*a*b* 明度轴建模，且只在 Chrome 111+、Firefox 117+、Safari 16.4+ 中生效；写错一个单位（比如 L 缺 %）整条声明就静默消失，不报错也不降级。
lch()参数单位错一个，整条 CSS 就失效
浏览器不会提示、不 fallback 到下一行，直接跳过该规则。这是上线后主题色“突然变黑”或“全屏灰块”的根源。
-
lch(70 80 240deg)❌ ——L必须带%（70%或0.7），不能是纯数字 -
lch(70% 80% 240deg)❌ ——C是无单位数值（80），不是百分比 -
lch(70% 80 240)❌ ——H必须带deg（240deg），Safari 16.4–17.3 对此敏感 -
lch(0% 100 240deg)✅ 渲染为纯黑（L=0%时C强制归零，不是“暗蓝”）
用 lch() 控制明度时，别直接套用设计稿数值
设计师给的 LCH 值常来自 Figma（D50 白点），而 CSS 默认用 D65 白点，青绿区色相会偏移 3–5°，导致主题色发灰或偏洋红。
- 深色模式下，
hsl(240, 100%, 20%)在#121212上几乎不可见（CIE Y ≈ 0.01），但lch(25% 60 240deg)才落在视觉暗度一致的档位 - 不要把 HEX 直接丢进在线转换器——不同工具精度差异大，部分会丢失色域信息；建议用
colorjs.io或构建时 PostCSS 插件统一转 - 低亮度下
C值易溢出 sRGB：例如lch(20% 120 240deg)在 Chrome 中会被 clamp 成近似灰阶，Safari 可能显示异常或透明
渐变和禁用态中 lch() 的插值陷阱
CSS 不对 lch() 渐变做色相短弧优化，跨 0°/360° 时中间段会塌陷成灰带，禁用态若只降 L 会失饱和。
-
linear-gradient(lch(60% 70 350deg), lch(60% 70 10deg))实际走 350→360→10 路径，中间段C被强制拉低，出现难看的灰紫色 - 色相差 >180° 时必须手动拆段：
linear-gradient(lch(60% 70 350deg), lch(60% 70 360deg), lch(60% 70 10deg)) - 禁用态建议固定
H，只降C（如70 → 25），L最多微调 ±5%，否则视觉强度断层明显
真正难的不是写出 lch()，而是让所有浏览器按你预期渲染——它依赖设备色域、白点一致性、单位精确性三者同时成立，漏掉任何一环，主题色就从“感知均匀”变成“随机发灰”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
