颜色混合实战:两种颜色按比例混色,调出中间色

设计里经常遇到这种需求:手上有两个确定的颜色,想知道它们按某个比例混在一起会变成什么。可能是你方品牌色和合作方品牌色,可能是改版前后的两个强调色,也可能只是想在两个端点之间取一个中间值。这件事用肉眼在 Figma 里凑,很难凑准;用代码算,又要现场翻插值公式。一个专门的颜色混合器,把两个十六进制值丢进去、拉一下比例滑块就能读出结果,正好解决这个痛点。

混色到底在算什么

最直观的混色发生在 RGB 空间。一个颜色拆成红、绿、蓝三个通道,每个通道是 0 到 255 的整数。按比例混合,就是对三个通道分别做线性插值。

假设比例是 t(0 到 1 之间,t 表示第二个颜色占的权重),那么:

结果红 = 颜色 A 的红 ×(1 − t)+ 颜色 B 的红 × t
结果绿 = 颜色 A 的绿 ×(1 − t)+ 颜色 B 的绿 × t
结果蓝 = 颜色 A 的蓝 ×(1 − t)+ 颜色 B 的蓝 × t

三个通道各算各的,互不干扰。这就是为什么 RGB 混色被叫做线性求平均,也是 CSS 和 Canvas 默认的那套数学。

红配蓝 50% 混出什么:一个真实例子

拿最经典的例子走一遍。红色是 #FF0000,拆成通道就是 R=255、G=0、B=0;蓝色是 #0000FF,也就是 R=0、G=0、B=255。比例取 50%,t=0.5。

代进上面的公式:

结果红 = 255 ×0.5 + 0 ×0.5 = 127.5,取整 128
结果绿 = 0 ×0.5 + 0 ×0.5 = 0
结果蓝 = 0 ×0.5 + 255 ×0.5 = 127.5,取整 128

得到 R=128、G=0、B=128,换成十六进制就是 #800080,标准的紫色。红配蓝出紫,跟我们的直觉一致。把比例往蓝那边拉到 75%,结果会偏向 #4000BF 这种带蓝的紫;往红那边拉,就偏向品红。一个滑块就能扫完两点之间的全部中间色。

我自己最常用它干的事

我做设计交付的时候,最高频的一个场景是改版时找过渡色。有次强调色要分两个版本从一个玫红 #DB2777 过渡到一个紫 #7C3AED,产品经理想在中间那个 sprint 用一个临时过渡色,既不完全是旧色也不完全是新色。以前这种事会在群里贴三个长得差不多的颜色让大家投票,吵半天也没结论。后来我直接把两个十六进制值丢进混合器,比例拉到 50%,读出中点的 HEX 和 HSL,把这个值贴进 token,讨论就结束了。一个站得住脚的中间值,比三张截图有说服力得多。

设计调色、渐变中间值、品牌色微调

混色不只是混一个点,它能直接服务三类常见的设计活:

品牌色调和:联名项目要一个共用强调色,把双方品牌色按 50% 混合,得到一个谁都不偏袒的折中色,用在共用按钮和徽章上。
渐变中间值:两个端点之间生成 5 阶、9 阶或 11 阶色阶,正好对应 Tailwind、Material 那种设计系统的调色板规格,整组十六进制数组复制进 tokens 文件就行。
品牌色微调:想让一个主色稍微往某个方向偏一点,就拿它和目标方向的颜色按小比例(比如 20%)混合,得到一个微调后的版本,比手动改通道数值更可控。

要注意一点:两个高饱和色在 RGB 里取中点容易发灰发脏,比如纯蓝加纯黄在 RGB 里得到的是偏黄绿的卡其,而不是绿色。这时候换到 HSL 或 LAB 空间,中点才保得住饱和度。

十六进制输入怎么用最顺手

十六进制是最通用的颜色交换格式,设计稿、CSS、代码里到处都是它。混合器支持直接输入或拾取两个 HEX 值,所以你从 Figma 拷一个色号、从代码里拷另一个色号,粘进去就能算,不用先转成 RGB 三个数字。结果也同步以 HEX、RGB、HSL、LAB 四种格式输出,每个都能一键复制,要哪种格式拿哪种。

如果你需要的不是混色,而是把一个颜色在不同格式之间来回转,可以用颜色格式转换工具;如果你想要的是两端之间一整条平滑渐变而不是单个中间点,渐变生成器更顺手。而当你手上确实是两个指定的颜色、就想看它们按比例混出来是什么样,直接用颜色混合器最对路。整个过程在浏览器本地完成,颜色不上传,也不需要注册。

Made by Toolora · Updated 2026-06-13