免费工具 · OKLCH 插值
CSS 渐变生成器 — OKLCH · 线性 · 径向 · 锥形
用感知均匀的 OKLCH 插值构建任意 CSS 渐变。可与传统 sRGB 并排对比，再复制 CSS、Tailwind v4、SCSS 或 SVG。
预设
代码
CSS
background: linear-gradient(135deg in oklch, #7C3AED 0%, #EC4899 100%);
Tailwind 任意值
bg-[linear-gradient(135deg in oklch, #7C3AED 0%, #EC4899 100%)]
SCSS
$gradient: linear-gradient(135deg in oklch, #7C3AED 0%, #EC4899 100%);
SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="g-1778840788991" x1="14.6%" y1="14.6%" x2="85.4%" y2="85.4%">
<stop offset="0%" stop-color="#7C3AED" />
<stop offset="100%" stop-color="#EC4899" />
</linearGradient>
</defs>
<rect width="100" height="100" fill="url(#g-1778840788991)"/>
</svg>为什么用 OKLCH
渐变的中段，正是 sRGB 翻车的地方。
下方两个渐变都是从琥珀色到蓝色，起点相同、终点相同，唯一不同的是插值色彩空间。sRGB 会经过一段灰扑扑的"脏中点"，OKLCH 则全程纯净。
sRGB
注意中段那块灰褐色——那是 sRGB 在按通道平均，产生了一种两端颜色里都不存在的灰色。
OKLCH
OKLCH 在感知均匀的空间里插值，中点饱和度保持完整，从一端到另一端读起来像顺滑的色相过渡。
结论
只要是两个饱和色之间的渐变，默认就用 OKLCH。仅当你必须支持 Safari 16.4 / Chrome 111 / Firefox 113 之前的老浏览器才用 sRGB——而且即便如此，也应该用 @supports not (background: linear-gradient(in oklch, red, blue)) 把它作为回退。
线性 vs 径向 vs 锥形——分别适合什么
三种 CSS 渐变函数对应三种不同任务。选错类型，是渐变设计里最常见的错误。
线性
用于英雄区背景、按钮表面、大面积色彩铺陈，任何需要干净方向性过渡的地方。90% 的场景的默认选择。
径向
用于聚光效果、柔和暗角、发光按钮、深色模式的层次感。任何"焦点在某一点向外散开"的场景。
锥形
用于色环、加载转圈、进度环、风格化色相展示。生产 UI 里少见——但需要时无可替代。
三步生成一个干净的渐变
选类型和色标
没有特殊需求就用线性。两个色标是下限，四个通常够用——颜色越多并不会让效果更好。
OKLCH 保持开启
OKLCH 是默认有它的道理。除非确实需要支持老浏览器，否则不要切回 sRGB；开启对比模式可以验证 OKLCH 版本是否真的更好。
复制可上线的代码
CSS 可直接粘进样式表；Tailwind 任意值在 v4 中支持 in oklch 语法；SCSS 提供变量；SVG 提供可内联到图标或英雄区的渐变定义。