Chroma（C）是OKLCH中感知色度，非HSL饱和度，无百分比含义，数值表示OKLab中离灰轴欧氏距离；其安全范围为0.05–0.35，需依色域、明度L耦合调整，禁用固定C值或C=0。
chroma值不是“饱和度”，不能直接从HSL照搬
很多人把C当成HSL里的saturation，调个80%就往上写，结果颜色发灰、不鲜艳，甚至在P3屏上完全“塌陷”。OKLCH的C是感知色度（perceptual chroma），单位是无量纲小数，数值本身没有百分比含义——0.4不是“40%色度”，而是“在OKLab模型中离中性灰的欧氏距离为0.4”。它和设备色域强相关：同一C=0.3在sRGB显示器上可能饱满，在P3屏上只是中等强度，在Rec.2020屏上则显得苍白。
安全取值范围：0.05–0.35 是多数UI组件的实用区间
超出这个范围容易触发渲染异常或降级失效：
-
C < 0.05：视觉上接近灰阶，但L轴微小变化会放大噪点感，禁用在文字/边框等高对比场景 -
C = 0.12–0.22：按钮主色、标签背景的推荐带，兼顾可读性与品牌识别（如oklch(62% 0.18 258.5)替代#3b82f6） -
C > 0.35：仅限宽色域增强场景，且必须配合@media (color-gamut: p3)包裹，否则在sRGB屏上会自动压缩成低彩度，甚至变暗 - 禁用
C > 0.5：当前所有主流浏览器（含Chrome 112+/Safari 17.4+）对超大C值的插值不稳定，动画中易出现跳变或色块
禁用固定C值做禁用态，应按L-C耦合逻辑衰减
单纯把C砍半（如0.28 → 0.14）做禁用态，会导致深色模式下对比度崩塌。正确做法是：
- 保持
H完全不变（避免色相漂移） - 将
C降至原值的0.4–0.5倍（例如0.28 → 0.12） - 同步微调
L：浅色模式下调高L约0.01–0.02（更显“褪色感”），深色模式则降低L约0.01（防灰雾） - 绝对不要设
C = 0：那会强制归零色相信息，部分安卓WebView渲染为纯黑或纯白
生成色阶时，C必须随L非线性衰减
OKLCH色阶不是“L递减、C恒定”的直线拉伸。人眼对暗部色度更不敏感，所以：
立即学习“前端免费学习笔记（深入）”；
- L在
0.8–1.0区间时，C可维持0.20–0.28 - L在
0.5–0.7区间时，C建议缩至0.14–0.20 - L
< 0.4时，C应≤0.08（否则深色模式下文字可读性暴跌） - 工具链提示：用
colorjs.io导出OKLCH时，勾选“Preserve perceptual lightness steps”，它会自动按L-C耦合曲线重算C值
@media (color-gamut: p3)联动校准。写死C=0.25看似省事，却可能让同一套Token在MacBook Pro上鲜活、在Dell S2721DGF上发闷、在iPhone SE上变灰。 
