Color Blender｜混合颜色并创建调色板
混合两种颜色并生成 2–30 步的平滑过渡。将调色板导出为 JSON 或 CSS。
什么是 Color Blender？
Color Blender 是一款免费的在线工具，可以混合两种颜色并生成一系列平滑的中间色调。您选择起始色和结束色，决定所需的步数（1 到 30），工具立即渲染出完整的过渡调色板。它解决了设计中手动计算渐变、数据可视化色阶或品牌调色板的中间停止点这一常见问题——无需 Figma、Illustrator 或任何已安装的软件。所有计算均在浏览器中运行，不会向服务器发送任何数据。
主要功能
- 混合两种颜色 — 通过文本字段或原生取色器输入 Hex 值；两个输入同步更新。
- 可调节 1–30 步 — 滑块控制调色板中的颜色数量（包含两个端点）。设为 2 步时只有原始颜色对；设为 30 步时可获得精细分级的过渡。
- 实时调色板预览 — 移动滑块或更改任一颜色时，实时渐变条和可点击色块网格会即时更新。
- 复制单个颜色或整个调色板 — 点击任意色块可将其 Hex 值复制到剪贴板。"全部复制"按钮一次性复制所有逗号分隔的 Hex 代码列表。
- 带 RGB 和 HSL 工具的 HEX 输出 — 每个色块标签显示 Hex 值；源代码使用共享 color-utils 库中的
hexToRgb、rgbToHex和generateBlendedPalette。 - 输入用可视化取色器 — 每个文本字段旁都有一个原生
<input type="color">，可以直观地选择颜色或直接输入值。 - 将调色板导出为 JSON — 下载包含
color1、color2、steps和完整palette数组的color-blend-palette.json文件。 - 导出为 CSS 变量（Premium） — PremiumExportButton 生成带有命名自定义属性的
color-blend-palette.css文件。
如何使用 Color Blender
第一步：设置两种基础颜色
打开 即将推出: Color Blender 工具。您会看到两个并排的颜色输入框，分别标记为"颜色 1"和"颜色 2"。每个输入框有一个取色器（左侧的方形色块）和一个 Hex 文本字段。
点击颜色 1 的取色器以打开浏览器的原生颜色选择器，或直接输入 Hex 值——例如 #E63946 表示鲜红色。对颜色 2 执行相同操作：可以尝试 #457B9D 作为钢蓝色。每个输入框下方的预览矩形显示所选颜色，并以对比文本颜色叠加其 Hex 代码（工具会自动判断使用黑色或白色文本以确保可读性）。
使用交换颜色按钮立即反转两个输入，或点击随机按钮随机选择两种新颜色。
第二步：调整混合步数
颜色输入框下方有一个"混合步数"滑块。向左（朝 1 方向）拖动获得最小过渡，向右（朝 30 方向）拖动获得精细调色板。标签显示当前步数，滑块下方的一行显示调色板中将出现的颜色总数。
对于标准 UI 渐变，5–7 步通常足够。对于数据可视化色阶，10–12 步可以提供足够的范围来清晰区分类别。
第三步：查看混合后的调色板
"混合调色板"卡片出现在滑块下方。顶部是一个连续渐变条，显示颜色从左到右的过渡方式。下方是 64×64 像素方形色块的网格，显示每个步骤。
将鼠标悬停在任意色块上，可在小型叠加层中查看其 Hex 值。点击色块可将值复制到剪贴板。Toast 通知会确认复制成功。
色块下方的列表视图显示每种颜色的 Hex 代码，附有小预览方块和单独的复制按钮。
第四步：导出调色板
使用三种导出选项之一：
- 全部复制 — 将完整调色板复制为逗号分隔的字符串（例如
#E63946, #C25167, #9F6388, ...），可粘贴到任何地方。 - 导出 JSON — 下载结构为
{ "color1": "#E63946", "color2": "#457B9D", "steps": 7, "palette": [...] }的color-blend-palette.json。 - CSS（Premium） — 下载含有
--blend-0到--blend-N命名 CSS 自定义属性的color-blend-palette.css。
实际示例
网站标题的品牌渐变
设计师为初创公司构建登陆页面，需要从主品牌色 #6C3FF5（紫色）到辅助强调色 #00C2CB（青绿色）的渐变。设置 8 步可生成：#6C3FF5、#5C53F2、#4C66EF、#3C7AEC、#2C8DE9、#1CA0E6、#0CB4E3、#00C2CB。这套中间值可直接映射到等间距的 CSS 渐变停止点，确保没有突兀的跳跃。
数据可视化的色阶
开发人员创建等值线地图，需要从白色 #FFFFFF 到深绿色 #1A6B3A 的比例尺来表示人口密度。10 步可提供十个感知上不同的色调。导出的 JSON 可以直接作为域色数组导入 D3.js 或 Chart.js 配置中。
无障碍对比度验证
UI 团队使用 Color Blender 找出两种品牌颜色之间的中间色调，这些中间色调需要相对白色文本保持 WCAG AA 对比度。他们将 #003566（深蓝色）混合到 #FFC300（琥珀色），分 12 步，然后将每个 Hex 粘贴到 Contrast Checker 中，以确定安全的值范围。
技巧和最佳实践
使用随机按钮获取灵感。 当您在调色板方向上陷入困境时，点击随机会生成两种完全随机的 Hex 颜色。混合结果往往会揭示出意想不到的、值得保留的组合。
交换按钮有助于验证方向性。 由于渐变从左到右从颜色 1 读到颜色 2，交换可以快速查看过渡在相反方向是否更好看。
将喜爱的组合保存为预设。 PresetsPanel（为支持者提供）将 color1、color2 和 steps 值一起存储，这样您可以在不重新输入值的情况下调用精确的调色板配置。
从历史记录恢复之前的混合。 HistoryPanel 记录每次"全部复制"操作。恢复历史记录条目时，工具会重新解析复制的 Hex 列表，将颜色 1 设置为第一个值，颜色 2 设置为最后一个值，步数设置为总数。
从高步数开始然后减少。 如果不确定需要多少步，从 20 或更多开始查看完整细粒度，然后减少直到过渡看起来仍然平滑。大多数渐变在 5 到 10 步之间效果很好。
常见问题和故障排除
手动输入了无效的 Hex 值。 如果您在 Hex 文本字段中输入无效字符串（如 #ZZZZZZ），hexToRgb 返回 null，调色板渲染为空数组。色块区域将为空白。修复：确保 Hex 字段包含 # 后面恰好 6 个有效十六进制字符。
调色板只显示一两种颜色。 当滑块处于最小值 1 或 2 时会发生这种情况。向右拖动以添加中间步骤。
"全部复制"没有输出。 如果调色板为空（由于颜色无效），剪贴板写入尝试仍会触发，但发送空字符串。先修复颜色输入并确认渐变条可见，然后再复制。
JSON 导出下载没有触发。 某些浏览器会阻止特定上下文中的程序化链接点击。如果下载没有开始，请在浏览器设置中检查该网站的弹出窗口和下载是否被允许。
CSS 导出需要 Premium。 CSS 变量导出由 PremiumExportButton 组件控制，需要有效的支持者激活。JSON 导出是免费的，所有用户均可使用。
隐私与安全
Color Blender 完全在您的浏览器中运行。没有颜色数据、调色板配置或导出文件会传输到任何服务器。该工具仅使用 Web Clipboard API 和 Blob/URL API——两者都是本地浏览器操作。预设和历史数据存储在浏览器的 IndexedDB 数据库中，永远不会离开您的设备。初始页面加载后，该工具可以离线工作。
常见问题
Color Blender 是免费的吗？
是的，Color Blender 完全免费，无需账户。核心功能——混合颜色、调整步数、复制 Hex 值和导出 JSON——对所有访客开放。CSS 变量导出是 Premium 支持者功能，通过 Ko-fi 捐赠 5 美元可获得 30 天访问权限。
Color Blender 可以离线使用吗？
可以。页面加载后，Color Blender 无需互联网连接即可工作。所有颜色计算均在浏览器的 JavaScript 中运行，正常使用期间不会发出任何网络请求。这使其在互联网访问受限的环境中也可以安全使用。
我的数据在 Color Blender 中安全吗？
完全安全。没有颜色值、调色板数据或导出文件会被发送到服务器。所有处理都在浏览器本地进行，使用 Web Clipboard API 进行复制，使用 Blob API 进行文件下载。您的颜色选择完全保留在您的设备上。
混合算法如何工作？
该工具使用线性 RGB 插值。它将两种 Hex 颜色转换为其 RGB 分量，然后在 RGB 颜色空间中沿它们之间的直线计算均匀间隔的中间值。虽然像 OKLab 这样的感知颜色空间可以为某些颜色对生成看起来更均匀的渐变，但线性 RGB 插值计算简单，产生可预测的对称结果。
步数是只包含中间值还是也包含端点？
步数包含两个端点。5 步设置恰好生成 5 种颜色：起始颜色、3 个中间色调和结束颜色。设为 2 只给出两种原始颜色，没有混合。滑块范围为 1 到 30。
我可以输入 Hex 以外的颜色吗？
文本输入字段只接受 Hex 值。如果您想从 RGB 或 HSL 值混合颜色，请先使用 Color Converter 获取 Hex 等价值，然后将其粘贴到 Color Blender 中。
导出的 JSON 格式是什么？
JSON 文件有四个键：color1（起始 Hex）、color2（结束 Hex）、steps（滑块值）和 palette（从开始到结束的 Hex 字符串数组）。对于从 #E63946 到 #457B9D 的 5 步混合，调色板数组恰好包含 5 个 Hex 值。
我可以混合两种以上的颜色吗？
Color Blender 只支持两种输入颜色。要创建有更多锚点的多停止渐变，请分别混合每对相邻颜色并合并生成的调色板。即将推出: Gradient Generator 原生支持多个颜色停止点。
如何在 CSS 中使用调色板？
对于 JSON 导出，迭代 palette 数组并将每个值分配给渐变停止点或 CSS 自定义属性。对于 CSS 导出（Premium），下载的文件包含名为 --blend-0 到 --blend-N 的变量，您可以将其导入任何样式表。
调色板包含原始颜色吗？
是的。调色板数组中的第一个颜色始终是颜色 1，最后一个始终是颜色 2。它们之间的所有值都是计算出的插值。
相关工具
- 即将推出: Color Mixer — 使用单个比例滑块混合两种颜色，快速完成一次性混合而无需生成完整调色板。
- 即将推出: Gradient Generator — 使用精确的角度和位置控件构建多停止 CSS 渐变。
- Color Picker — 从屏幕上的任何位置或上传的图像中选取颜色。
- Color Converter — 在混合之前在 HEX、RGB、HSL、HSB 和 CMYK 之间转换。
立即试用 Color Blender：即将推出: Glyph Widgets Color Blender