blue → yellow 渐变发灰是 rgb 线性插值必然结果，因路径穿越人眼敏感的低饱和中明度区域；需手动添加缓冲色、控制停靠点间隔（≤20%）、避免 rgba() 透明过渡，并用工具预计算 oklch 路径转 rgb() 实现视觉连贯。
blue → yellow 渐变发灰是 RGB 插值路径经过人眼敏感灰区
不是颜色写错了，也不是浏览器 bug，而是 linear-gradient 在 RGB 空间里从 #0000ff 到 #ffff00 的直线插值，必然穿过一大片低饱和、中等明度的蓝紫→灰绿→黄绿过渡带——这部分在 LAB 空间里离感知“中性灰”很近，人眼极其敏感，稍有亮度/色度偏差就显“脏”。DevTools 里看 computed color 全是 rgb()，说明插值完全没走 OKLCH 或 HSL 路径。
停靠点太稀疏 + 缺少缓冲色 = 灰带放大器
只写 linear-gradient(to right, #0000ff, #ffff00)，浏览器默认在 0% 和 100% 采样，中间 100% 区域全靠单次长距离 RGB 插值填充。这段路径恰好横跨色相环上最不均匀的一段（240°→60°），RGB 坐标系下没有“捷径”，只能硬算 R/G/B 三通道线性变化，结果就是：R 从 0→255 拉得太猛，G 从 0→255 中途被 B 拖慢，B 从 255→0 又过早衰减，三者错位叠加出灰蒙感。
- 手动插入至少一个缓冲色，比如
#6666cc（偏蓝紫）或#cccc66（偏黄绿），位置放在 40%–60% 区间 - 避免用 HSL 等分数值生成中间色——
hsl(240, 100%, 50%)→hsl(60, 100%, 50%)算出来的中间色往往偏紫过重，实际观感更灰 - 优先试
hsl(270, 80%, 60%)（品蓝）→hsl(30, 90%, 60%)（金橙）这类色相差小、明度饱和度稳定的组合，再微调
Safari 和移动端对 rgba() 渐变更“诚实”，灰得更明显
如果用了 rgba(0,0,255,1) → rgba(255,255,0,1)，问题不大；但一旦加透明度（比如做淡入效果），Safari 会严格按四通道分别插值，A 不变时 R/G/B 变化节奏失衡，叠加在默认白色背景上，中间段立刻泛白灰。这不是 OKLCH 缺失导致的，是 alpha 通道参与计算的副作用。
- 别用
rgba()做纯色过渡，改用hsl()或oklch()控制 L（亮度）和 C（色度）渐进下降，保持视觉连贯 - 若必须透明，把底层背景设死：
background-color: #fff，再叠background-image: linear-gradient(...) - 移动端 iOS Safari 对浅色过渡（如
#e6f0ff→#fff9cc）也极敏感，哪怕无 alpha，也要加 1–2 个中间停靠点
in oklch() 在 CSS 里根本不起作用
写了 linear-gradient(in oklch, oklch(30 0.4 270), oklch(90 0.4 100))？没用。所有主流浏览器（Chrome 124+、Firefox 125、Safari 17.5）都忽略 in oklch 关键字，直接 fallback 到 sRGB 插值。你看到的“灰”，就是 RGB 插值的原生结果。
-
in oklch目前只对 SVG 的<lineargradient></lineargradient>标签生效，CSS 函数里是无效语法 - 真要用 OKLCH 思路，得提前算好路径：用
colorjs.io或culori在 OKLAB 空间采样 5–7 个点，导出为rgb()值，再拼成带百分比的渐变声明 - 停靠点间隔别超过 20%，否则浏览器会在两个点之间又做一次长距离 RGB 插值，前功尽弃
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
