颜色混合器

在线工具，按您想要的比例混合2-5种颜色创建新颜色。提供RGB加色混合、渐变预览、中间色生成和配色调和推荐功能。一键复制HEX和RGB值。

最后更新: 2026/01/17

混合颜色

混合结果

#000000

rgb(0, 0, 0)

渐变预览

中间色

步数:

配色调和推荐

混合历史

暂无保存的历史记录

什么是颜色混合器？

颜色混合器是一款在线工具，可以按照您想要的比例混合两种或更多颜色来创建新颜色。您可以同时混合最多5种颜色，并使用滑块精细调整每种颜色的比例。使用RGB加色混合方式，为数字环境提供准确的颜色混合结果。

它可以用于网页设计、UI/UX工作、品牌颜色开发等各种领域。您可以立即查看并复制混合颜色的HEX代码和RGB值，以便在项目中直接使用。通过渐变预览、中间色生成和配色调和推荐功能，可以实现更具创意的色彩工作。

适用场景

品牌颜色开发 – 基于现有的品牌颜色创建辅助色或强调色，构建统一的调色板。
UI/UX设计 – 以精确的混合比例从基础颜色生成按钮悬停状态、禁用状态等变体颜色。
网页开发 – 在创建CSS渐变之前预览中间色的效果，找到和谐的配色组合。
插画创作 – 当需要两种颜色之间的自然过渡色时，使用中间色生成功能创建平滑的色谱。
室内设计 – 数字化模拟油漆和配饰的颜色，预测混合两种颜色的结果。
色彩学习 – 直观地理解颜色混合原理，并实验互补色、类似色、三元色等配色调和理论。

主要功能

多颜色混合 – 可同时混合2到5种颜色。自由调整颜色数量，从简单的双色混合到复杂的多色混合都能实现。
比例调节滑块 – 使用滑块将每种颜色的混合比例从0%精确调整到100%。结果实时更新，轻松找到理想的颜色。
渐变预览 – 以渐变形式查看混合中使用的颜色如何自然地连接在一起。作为CSS渐变工作的参考非常有用。
中间色生成 – 选择3到9步来自动生成到混合结果之间的中间色。对于扩展调色板或创建平滑过渡很有帮助。
配色调和推荐 – 根据混合结果颜色，基于配色调和理论提供推荐颜色：互补色、类似色、三元色和分裂互补色。
混合历史 – 之前创建的混合结果会自动保存。方便找到或比较您喜欢的颜色。
一键复制 – 只需单击即可将HEX代码或RGB值复制到剪贴板，立即在项目中使用。

使用方法

选择颜色数量 – 使用顶部的下拉菜单选择要混合的颜色数量（2-5个）。默认设置为3种颜色。
输入颜色 – 点击每个颜色选择器选择颜色，或直接在HEX输入框中输入颜色代码。您也可以使用”随机颜色”按钮生成随机颜色。
调整比例 – 移动每种颜色下方的滑块来调整混合比例。比例变化时，混合结果会实时更新。
查看结果 – 在混合结果部分查看最终颜色和HEX/RGB代码。使用复制按钮将代码保存到剪贴板。
使用附加功能 – 通过渐变预览查看颜色流动，调整中间色步数找到所需颜色，并在配色调和标签中探索和谐的颜色组合。

颜色混合原理

什么是RGB加色混合？

RGB加色混合（Additive Color Mixing）是通过添加光的三原色——红色（Red）、绿色（Green）和蓝色（Blue）来创建新颜色的方法。这是数字屏幕、显示器和电视等发光设备使用的颜色混合方式。

红 + 绿 = 黄色（Yellow）
绿 + 蓝 = 青色（Cyan）
蓝 + 红 = 品红色（Magenta）
红 + 绿 + 蓝 = 白色（White）

与混合颜料或油墨时使用的减色混合（颜色组合后变暗）不同，加色混合在添加颜色时会变亮。本工具使用RGB加色混合，为数字环境提供准确的颜色混合结果。

加权平均计算

混合多种颜色时，通过对每种颜色的RGB值应用比例（权重）来计算平均值。例如，以50:50的比例混合红色（#FF0000）和蓝色（#0000FF）：

R = (255 × 0.5) + (0 × 0.5) = 127
G = (0 × 0.5) + (0 × 0.5) = 0
B = (0 × 0.5) + (255 × 0.5) = 127
结果：RGB(127, 0, 127) = #7F007F（紫色）

配色调和理论

配色调和（Color Harmony）是创建视觉上令人愉悦且平衡的颜色组合的理论。根据色轮（Color Wheel）上的位置关系，有几种调和类型。

互补色（Complementary）

在色轮上正对面（180°）位置的两种颜色。它们产生最强烈的对比效果，使每种颜色都更加突出。例如：红色和青绿色，黄色和紫色。常用于需要吸引注意力的设计。

类似色（Analogous）

色轮上相邻（约30°间隔）的颜色。这是自然界中常见的和谐组合，给人柔和舒适的感觉。例如：红-橙-黄，蓝-青-绿。适合统一感的设计。

三元色调和（Triadic）

在色轮上形成等边三角形（120°间隔）的三种颜色。创造出多彩而平衡的配色组合。例如：红-黄-蓝，橙-绿-紫。用于既有活力又稳定的设计。

分裂互补色（Split-Complementary）

使用基准色及其互补色两侧的相邻色（150°和210°位置）。保持互补调和的强度，同时允许使用更多样的颜色。即使是初学者也能轻松创建和谐调色板的方法。

常见问题

为什么RGB混合和颜料混合的结果不同？

RGB混合是添加光的加色混合，而颜料混合是吸收光的减色混合。在加色混合中，颜色组合后变亮，混合所有颜色会产生白色。在减色混合中，颜色组合后变暗，混合所有颜色会接近黑色。本工具使用适合数字环境的RGB加色混合。

混合比例是如何计算的？

每种颜色的滑块值用作其权重。例如，如果颜色A是60%，颜色B是40%，则最终RGB值按每个通道计算为（A值 × 0.6）+（B值 × 0.4）。如果所有比例都是0%，则平均分配。

配色调和推荐使用什么标准？

混合结果颜色被转换为HSL（色相-饱和度-明度）色彩空间，然后根据色轮上的角度关系计算和谐的颜色。互补色在180°对面位置，类似色在±30°相邻位置，三元色在120°间隔，分裂互补色在150°/210°位置。

混合历史存储在哪里？

混合历史存储在浏览器的本地存储（localStorage）中。使用同一浏览器再次访问时，之前的记录会保留。如果删除浏览器数据或使用隐身模式，历史记录将被重置。

中间色是如何计算的？

使用线性插值（Linear Interpolation）从第一个输入颜色到混合结果颜色生成中间色。根据选择的步数，将每个通道的RGB值均匀分割，创建自然的颜色过渡。

可以在手机上使用吗？

是的，在移动设备上完美运行。采用响应式设计制作，在智能手机和平板电脑上通过触摸进行颜色选择和比例调整都可以使用。无需安装任何应用程序，直接在网页浏览器中使用即可。