颜色渐变生成器

什么是颜色渐变？

颜色渐变是两种或多种颜色之间的平滑过渡，通过沿路径插值红、绿、蓝三个通道产生。网页设计师使用渐变为背景、按钮和插画增加深度、方向和视觉趣味，而不必使用平面纯色填充。最常见的形式是双色线性渐变，其中起始色在指定数量的中间步数中混合到结束色。每一步都是一个独立的颜色，其 RGB 值按比例位于两端之间 — 例如 #0EA5E9（天蓝）与 #86EFAC（浅绿）之间的中间步是一种柔和的青绿色。

渐变通过 CSS 的 linear-gradient() 和 radial-gradient() 函数被普及，但其底层概念只是一组浏览器混合的颜色列表。本工具为您生成该列表，您可以直接粘贴到 CSS 渐变中，或为自定义调色板挑选个别步数。

何时生成渐变

提前生成渐变可为您提供一组现成的颜色列表，适用于多种设计场景。常见场景包括：

• CSS 背景。 将起始色和结束色粘贴到 linear-gradient(90deg, #0EA5E9, #86EFAC)，用于英雄区、卡片或按钮。
• 数据可视化。 将连续的数值映射到渐变步数，低值用起始色，高值用结束色。
• 品牌过渡。 混合两种品牌色，为横幅创造可识别的视觉签名。
• 插画与 UI。 为阴影、高光或进度条手工挑选中间步数，而不是猜测色调。
• 无障碍预览。 检查每一步的 HEX 代码，在应用渐变前验证与文本的对比度。
• 跨工具一致性。 将同一份步数列表导出到 Figma、Sketch、Canva 或代码，让每个工具使用相同的颜色。

由于插值在 RGB 空间中是线性的，渐变感觉均匀且可预测，这正是大多数 UI 用途所需要的。

线性 RGB 插值详解

当您要求在起始色和结束色之间生成 N 步时，本工具通过线性插值计算每一步的红、绿、蓝通道。对于第 i 步（从 0 开始计数，共 N 步），比例为 t = i / (N - 1)，每个通道为 start + (end - start) * t，四舍五入到最接近的整数。第一步始终是起始色，最后一步始终是结束色，中间步数均匀分布。

线性 RGB 插值是最简单且最广泛使用的方法。其他颜色空间（HSL、OKLab）可以产生在人眼看来更均匀的渐变，但对于大多数 UI 工作，差异很微妙，而 RGB 插值正是浏览器在混合 CSS 渐变时内部使用的方法。

常见渐变使用场景

下表显示了不同步数如何适合不同的设计目标。

步数	最适合
3	极简横幅、简单的按钮填充
5	进度条、微妙的品牌混合
8	大多数 UI 渐变的默认值
12	具有平滑过渡的数据可视化热力图
20	细粒度调色板、摄影风格混合

选择仍然平滑的最小步数 — 多余的步数只会增加视觉噪点而不会改善设计。

如何生成渐变

使用本工具生成渐变只需一秒钟，且完全在浏览器中完成，无需上传、无需注册、无需安装。请按以下步骤操作：

1. 选择端点。 使用两个颜色拾取器设置起始色和结束色。
2. 设置步数。 在步数字段中输入 3 到 20 之间的数字。
3. 查看渐变。 色带和色块网格实时更新，每个色块显示其 HEX 代码。
4. 复制代码。 点击"复制全部 HEX"复制每一步的 HEX 值，然后粘贴到 CSS、设计工具或代码中。

由于所有步骤都通过 JavaScript 在浏览器本地运行，您的颜色选择永远不会上传到服务器。这使渐变生成完全私密且即时。