ZH
我的工具

颜色混合器(颜料、光、感知)

按任意比例混合 2–10 种颜色,得到 HEX、RGB 和 HSL。可对比 sRGB 平均、加色光混合、感知型 OKLab 以及近似颜料的混合结果。

每行一种颜色,后面可选用量(份数或百分比)。例如“#FF0000 3”和“white 1”表示三份红色混一份白色。
我的工具 →
广告

红色和蓝色混在一起会得到什么颜色?这取决于混合的方式。本混合器可按任意比例混合两到十种颜色,并用四种方式给出结果:多数网站采用的简单 sRGB 平均、光的加色混合(重叠的灯光或快速旋转的色盘就是这样混合的)、感知型的 OKLab 混合,以及近似颜料的减色混合。对比表可以同时看到这四种结果。

使用方法

  1. 每行输入一种颜色——HEX、rgb()、hsl() 或 CSS 颜色名称——再加上用量,例如 #FF0000 3。
  2. 选择混合方式。
  3. 查看混合后的颜色的 HEX、RGB、HSL、OKLCH 以及最接近的 CSS 名称。
  4. 在预览下方的表格中比较各种方式的结果。

计算公式

sRGB:c = Σ wᵢcᵢ ÷ Σ wᵢ · 光:对线性化后的通道取平均,再重新编码 · OKLab:对 L、a、b 取平均 · 颜料:在线性通道上 c = exp(Σ wᵢ ln cᵢ ÷ Σ wᵢ)

wᵢ 是用量(份数或百分比,只有比例有意义)。线性化是撤销 sRGB 的伽马曲线,使光能够按物理规律叠加;颜料模式是三通道近似,并非颜料模拟。

示例

红色和蓝色等量混合,按 sRGB 平均得到 #800080(255 ÷ 2 = 127.5 → 128 = 十六进制 80),而作为混合光则是 #BC00BC,因为线性强度的一半重新编码后是 188。三份红色加一份白色得到 #FF4040。

常见问题

为什么“光”模式下红 + 蓝看起来更亮?

屏幕存储的颜色是经过伽马编码的。对存储的数字取平均(sRGB 模式)会低估光的强度;对真实的光强取平均,则得到两盏重叠的灯会呈现的更亮的 #BC00BC。

这里蓝色 + 黄色会变成绿色吗?

作为光,纯蓝和纯黄相加得到浅灰色(#BCBCBC)。真实颜料能混出绿色,是因为每种颜料吸收光谱的很大一部分。颜料模式只是粗略模仿:中等的蓝色和金黄色会变成橄榄绿,但纯 #0000FF 和 #FFFF00 没有共同的通道,混出来是黑色。

做网页设计该用哪种方式?

想要看起来均匀的渐变和混合,用 OKLab。想与 CSS 的 color-mix(in srgb, …) 或其他工具保持一致,用 sRGB 平均。

最后更新:

引用此工具
APA

kakaoCalc. (2026, November 8). 颜色混合器(颜料、光、感知). https://kakao.mobile/zh/tools/color-mixer/

MLA

“颜色混合器(颜料、光、感知).” kakaoCalc, 8 Nov. 2026, kakao.mobile/zh/tools/color-mixer/.

广告