生成🔒 在浏览器中运行

颜色混合器

混合两种颜色并生成渐变调色板

颜色A

#6366f1

颜色B

#ec4899

混合: 50% 颜色B#a857c5

#a857c5

渐变步骤

#6366f1

#7a61e2

#915cd4

#a857c5

#be52b6

#d54da8

#ec4899

使用案例

为营销网站找到两个品牌色之间得体的分隔色。
选择介于默认与按下状态之间的按钮悬停色。
设计一组在两种关键品牌色之间平滑过渡的图表配色。
选择一个连接两个相邻 UI 表面之间的背景色调。
为 Figma 中手动绘制的渐变模型生成中间色样。

关于颜色混合器

颜色混合器可以将两种颜色混合在一起，并生成它们之间的平滑渐变调色板。它免费、在浏览器中运行，不会在任何服务器上存储数据。非常适合探索颜色过渡和寻找中间色调的设计师。

常见问题

如何混合两种颜色？

使用颜色选择器选取两种颜色，工具会立即显示混合结果以及它们之间的渐变中间色。你可以复制调色板中任何颜色的HEX代码。

是否会有数据发送到服务器？

不会，所有颜色混合计算都在浏览器中进行。不会有颜色值或偏好发送到任何服务器。所有操作都在你的设备上本地运行，完全私密。

混合器支持哪些颜色格式？

你可以输入HEX格式的颜色，工具以HEX和RGB值显示结果。生成的渐变调色板提供多种中间色，让你在设计中轻松找到完美的过渡色。

为什么在 RGB 中混色有时会得到浑浊的中间色？

RGB 插值经过两种颜色的几何平均值，对于互补色（如红+绿），结果接近灰色。这在数学上正确，但视觉上单调。要获得更鲜艳的中间色，可使用 gradient-gen 工具手动放置多个色标，或选择色相更接近的两种颜色。

可以将这些色阶导出为 CSS 渐变吗？

本工具无法直接导出 — Color Mixer 生成的是离散色样，而非连续渐变。要得到 CSS linear-gradient 或 radial-gradient 字符串，请使用专门的 gradient-gen 工具，可放置多个色标并直接导出 CSS。可将 Color Mixer 中起止色的 hex 值粘贴进去。

使用案例

为营销网站找到两个品牌色之间得体的分隔色。

选择介于默认与按下状态之间的按钮悬停色。

设计一组在两种关键品牌色之间平滑过渡的图表配色。

选择一个连接两个相邻 UI 表面之间的背景色调。

为 Figma 中手动绘制的渐变模型生成中间色样。