color-mix(in lch,) 是目前最稳的纯 css 解法，因其绕开 linear-gradient() 的 srgb 插值缺陷，用静态混合替代运行时插值，但需满足三条件：参数同为 lch()/oklch() 格式、显式插入中间点、拆分色标且间隔≤20%。
直接用 linear-gradient() 写两端色，中间必然发灰——这不是配色问题，是浏览器在 sRGB 色彩空间做线性插值的物理结果。
为什么 color-mix(in lch, ) 是目前最稳的纯 CSS 解法
它绕开 linear-gradient() 的底层插值引擎，用静态混合代替运行时插值。Chrome 111+、Safari 16.4+ 已稳定支持，但必须满足三个硬条件：
-
color-mix()的两个参数必须同为lch()或同为oklch()格式；混用#ff0000或rgb()会静默失效 - 不能只写起点和终点；必须显式插入至少一个中间混合点，例如
color-mix(in lch, #ffcc00 70%, #0066cc 30%) - 整个渐变列表要拆开写：起点、中间点、终点都作为独立色标；不能赋值给 CSS 变量再引用
停靠点间隔必须 ≤20%，否则 banding 仍明显
浏览器在两个停靠点之间仍用 sRGB 插值，跨度越大，中间越容易出灰阶。尤其蓝→黄、红→青这类色相翻转路径，视觉敏感区集中在 40%–60% 区间。
- 别依赖默认
0%/100%分布；手动写死位置，例如rgb(0,0,255) 40%, rgb(255,255,0) 60% - 从
oklch色值生成停靠点时，用 Björn’s OKLCH Picker 或culori库采样，导出 RGB 值后拼成带百分比的渐变 - 移动端 iOS Safari 对浅色过渡（如
#fff9cc → #ffffff）也极敏感，哪怕无 alpha，也要加 1–2 个中间点
rgba() 渐变在 Safari 发灰的根源和解法
Safari 把 rgba(255,0,0,1) → rgba(255,0,0,0) 拆成 R/G/B/A 四条线各自线性变化，A 下降时 R/G/B 还没同步衰减，叠加在默认白色背景上就泛白灰。
- 最简解法：设死容器底色，
background-color: #fff，再单独用background-image写透明渐变 - 禁用
background简写——它会把lch()转成 RGB 缓存，失去意义；必须拆成background-color+background-image - 绝对不要混用
rgba()和lch()在同一渐变里，哪怕只有一个停靠点，整条链路都会退回到 sRGB
真正难的不是写对语法，而是意识到：你看到的“灰”，是浏览器在替你做数学题，而那道题的坐标系早就过时了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
