lch插值不发灰是因为其感知均匀性解耦l、c、h，避免rgb/hsl中通道异步变化导致的低饱和灰褐中间色；css图表中需用in lch语法、规范单位、禁混色空间，并确保起止色c≥30。
因为LCH在数值插值时能保持视觉感知均匀性，而RGB/HSL做不到这点——图表里相邻数据点的颜色差异，必须和它们的数值差成比例，否则会误导判断。
为什么LCH插值不会在中间段“发灰”
从深蓝到亮黄的渐变，在rgb()里必然经过大量rgb(128, 128, 0)这类低饱和灰褐值，人眼对中等亮度+低色度区域特别敏感，形成视觉断层；LCH把亮度L、色度C、色相H解耦，插值时C可稳定不塌缩，避免中间段褪色。
常见错误现象：
- 用
hsl(240, 100%, 30%)→hsl(60, 100%, 70%)做渐变，中间出现明显灰带 - 起止色
C值过低（如lch(50% 5 200)→lch(50% 8 220)），LCH优势几乎不可见
怎么在CSS图表中安全启用LCH颜色
浏览器支持已基本到位（Chrome/Firefox/Safari全支持），但降级逻辑必须手动写死：
- 图表元素的默认背景色必须用
background-color: #000等传统值写在@supports块外 -
@supports (color: lch(0% 0 0))内才写background: linear-gradient(in lch, lch(20% 80 240), lch(80% 90 60)) - 绝对不要混用
hsl()或rgb()色值进in lch渐变——浏览器无法跨空间插值，会直接跳变 -
L必须用百分比（0%–100%），C和H无单位，lch(50 100 180)是错的
LCH vs OKLCH：图表场景下该选哪个
OKLCH理论上更优，但当前落地风险更高：
-
oklch()的L值语义更准（同L=50%下红/绿/蓝视觉亮度真正一致），但要求L必须带单位（50%✅，0.5❌） - 旧版Safari对小数位敏感：
oklch(50% 0.234 258.54)可能解析失败，建议C和H保留≤1位小数 - Android WebView仍存在fallback风险，而
lch()已全平台稳定支持（截至2026年Q3） - 真正容易被忽略的是：LCH/OKLCH的“自然过渡”，只在起止色
C ≥ 30时才明显。如果图表数据范围窄、两端都偏灰，不如直接用hsl()调S和L更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
