颜色混合器
编程开发
在线颜色混合器，选择两种颜色自动生成中间色阶渐变，支持 1~20 步精细调节，点击色块即可复制 HEX 色值
快捷预设
日出
海洋
森林
晚霞
薰衣草
极光
颜色配置
颜色 A
#EF4444
→
颜色 B
#3B82F6
混合色阶
共 7 个色块
#EF4444
A
#D14E62
#1
#B3597F
#2
#95639D
#3
#776DBB
#4
#5978D8
#5
#3B82F6
B
linear-gradient(to right, #EF4444, #D14E62, #B3597F, #95639D, #776DBB, #5978D8, #3B82F6)使用场景
| 场景 | 说明 | 建议 |
|---|---|---|
| UI 渐变色设计 | 为按钮、背景、卡片等 UI 元素生成平滑渐变色方案 | 选择相近色相，步数 5~8 即可得到自然渐变 |
| 数据可视化配色 | 为图表生成连续色阶，从低值到高值平滑过渡 | 使用冷色→暖色对，步数 10+ 更细腻 |
| 品牌色阶生成 | 从品牌主色生成不同深浅的色阶，用于不同场景 | 一端选品牌色，另一端选白色或黑色 |
| CSS 渐变代码 | 生成色阶后可直接提取色值用于 CSS linear-gradient | 点击色块复制 HEX，组合为 gradient 代码 |
| 设计稿配色 | 快速探索两种颜色之间的过渡效果，辅助设计决策 | 尝试对比色或互补色，观察过渡效果 |
| 热力图配色 | 为热力图、地图等生成从低到高的颜色映射 | 蓝→红 经典热力图配色，步数 8~12 |
常见问题
颜色混合的原理是什么？
本工具使用 RGB 线性插值算法，将两种颜色的 R、G、B 三个通道分别按比例进行线性插值。例如步数为 5 时，会在颜色 A 和颜色 B 之间生成 5 个等间距的中间色，加上两端色共 7 个色块。
步数是什么意思？
步数决定了两端颜色之间生成多少个中间过渡色。步数越大，色阶越细腻。例如步数 1 只生成 1 个中间色（共 3 个色块），步数 20 则生成 20 个中间色（共 22 个色块）。
如何复制色值？
将鼠标悬停在任意色块上会显示其 HEX 色值，点击色块即可将 HEX 值复制到剪贴板。也可以直接看到色块下方的色值文字。
混合结果准确吗？
RGB 线性插值是最常用的颜色混合方式，适用于大多数设计和开发场景。但人眼对颜色的感知是非线性的，如果需要更精确的视觉均匀混合，可以在 HSL 或 LAB 色彩空间中进行。
如何用于 CSS 渐变？
生成的色阶可以直接转换为 CSS linear-gradient 代码。例如 3 个色块 #FF0000、#FF8000、#FFFF00 对应：linear-gradient(to right, #FF0000, #FF8000, #FFFF00)。
支持透明度混合吗？
当前版本仅支持不透明颜色（HEX 6 位）的混合。如需透明度混合，可将 RGBA 值手动计算后使用。
关于颜色混合器
颜色混合器是一款在线调色工具，通过 RGB 线性插值算法在两种颜色之间生成平滑的中间色阶。选择颜色 A 和颜色 B，设置混合步数（1~20），即可自动生成包含两端色在内的完整色阶。
核心功能：
- 颜色选择：支持颜色选择器和手动输入 HEX 色值两种方式
- 步数调节：1~20 步可调，步数越大色阶越细腻
- 快捷预设：内置 6 组经典配色方案，一键加载
- 点击复制：点击任意色块即可复制 HEX 色值
- 渐变代码：自动生成 CSS linear-gradient 代码，可直接用于前端开发
应用场景：UI 渐变色设计、数据可视化配色、品牌色阶生成、热力图配色、CSS 渐变代码生成等。