颜色混合器

使用量杯直观混合颜色。选择颜色、调整比例，并查看混合结果的 RGB、HSL 和 HEX 数值。

调色区

量杯 1

5

量杯 2

5

混合结果

输入比例

50%

RGB 构成

红: 142 (35.9%)

绿: 114 (28.8%)

蓝: 140 (35.4%)

混合颜色

颜色详情

HEX

#8E728C

RGB

rgb(142, 114, 140)

HSL

hsl(304, 11%, 50%)

颜色混合器 – 工作原理

颜色混合的原理

颜色混合主要分为两种方式：

加色混合用于屏幕和光源系统。当有色光叠加时，光线会相互叠加增强。红 + 绿 = 黄，红 + 蓝 = 品红，绿 + 蓝 = 青色。三种颜色全部叠加到最高亮度时，结果为白色。

减色混合用于颜料、油墨等材质。材料会吸收部分波长的光，只反射其余部分。减色法的三原色为青色（Cyan）、品红色（Magenta）和黄色（Yellow），即 CMY。大量混合后，颜色会趋向黑色。

本工具采用加色 RGB 模型，这是数字屏幕和网页设计的通用标准。

RGB 颜色模型

RGB 通过三个通道来定义一种颜色：

红色（R）：0–255
绿色（G）：0–255
蓝色（B）：0–255

屏幕上的每个像素都包含红、绿、蓝三个子像素。通过调整每个通道的亮度，显示器可以呈现超过 1670 万种颜色（ $256^3 = 16{,}777{,}216$ ）。

常见颜色格式

格式	示例	说明
HEX	#FF6B35	6 位十六进制格式，CSS 中常用
RGB	rgb(255, 107, 53)	以十进制表示的红、绿、蓝分量
HSL	hsl(16, 100%, 60%)	色相、饱和度、明度，视觉调整更直观

混合结果的计算方式

混色器通过对每个 RGB 通道取加权平均值来计算混合结果。若有 $N$ 种输入颜色，各颜色的比例为 $a_1, a_2, \ldots, a_N$ ，RGB 值分别为 $(r_i, g_i, b_i)$ ，则结果为：

R_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot r_i}{\sum_{i=1}^{N} a_i}

G_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot g_i}{\sum_{i=1}^{N} a_i}

B_{\text{mix}} = \frac{\sum_{i=1}^{N} a_i \cdot b_i}{\sum_{i=1}^{N} a_i}

简单来说，比例越高的颜色，对最终结果的影响就越大。

举例：将 3 份红色（#FF0000）与 1 份蓝色（#0000FF）混合：

R = \frac{3 \times 255 + 1 \times 0}{4} = 191

G = \frac{3 \times 0 + 1 \times 0}{4} = 0

B = \frac{3 \times 0 + 1 \times 255}{4} = 64

混合后的颜色约为 #BF0040，是一种深红紫色。

实际应用场景

网页设计与 UI

利用颜色混合来构建配色方案、测试透明叠加效果，并从基础色中衍生出强调色。

教学用途

这是一种直观展示光、人类色觉感知与色彩数学之间关系的好方法。

数字艺术

帮助设计师和插画师预判颜色在插图、设计和修图软件中叠加后的最终效果。

混色小技巧

从三原色入手 — 红、绿、蓝是 RGB 混色的基础。
调整各颜色的比例 — 比例越高，该颜色对混合结果的影响越大。
对比不同输出格式 — 根据实际使用场景，在 CSS、设计工具或代码中分别选用 HEX、RGB 或 HSL 格式。
RGB 三通道相等即为灰色 — 当红、绿、蓝三个分量数值相同时，混合结果为中性灰。

常见问题

加色混合与减色混合有何区别？加色混合使用光，颜色越叠加越亮，最终趋向白色。减色混合使用颜料，颜色越叠加越暗，最终趋向黑色。

为什么混合效果和颜料混色不一样？因为本工具基于 RGB 光色混合，而非颜料混色。在屏幕上，红色 + 蓝色 = 品红色；而颜料中，由于颜料会吸收光线，混合效果看起来截然不同。

混合结果的颜色代码可以直接用于 CSS 吗？可以。输出的 HEX、RGB 和 HSL 值均可直接用于 CSS 代码和绝大多数设计工具。

每个量杯上的"比例"代表什么？它表示该颜色在混合中所占的相对量。比例为 8 的颜色，对混合结果的贡献是比例为 4 的同色颜色的两倍。