CodeKitHub工具介绍
颜色混合器是按选定比例对两种颜色的红、绿、蓝通道做线性插值，这与渐变内部所用的数学原理相同。比例为 0% 时结果等于颜色 A，100% 时等于颜色 B，50% 时则是每个 RGB 通道的算术中点。
这与调和实体颜料不同（颜料混合是减色法，取决于具体色素），也不等同于在 HSL 空间中取平均——RGB 线性插值正是 CSS 渐变、设计工具以及大多数「两色之间取色」工具所采用的方法，因此结果会与浏览器中同样两种颜色的渐变效果一致。
为什么使用它？
- 在基础色和强调色之间找到一个自然过渡的悬停或激活状态颜色，而不是随意猜一个调整值。
- 查看任意比例下的精确 HEX 代码，而不是靠肉眼估计渐变截图。
- 11 级渐变条一键生成从一种颜色到另一种颜色的完整调色板，适合数据可视化或多节点渐变。
- 点击任意一级即可立即复制其 HEX 代码。
- 免费、即时、完全本地运行——无需上传，无需账号。
使用方法
- 使用取色器或输入 HEX 代码选择颜色 A 和颜色 B。
- 拖动比例滑块设置要混入多少颜色 B。
- 在色块上方读取混合结果的 HEX 和 RGB 值。
- 点击下方 11 级渐变条中的任意色块即可复制其 HEX 代码。
示例
输入
颜色 A #3B82F6（蓝色），颜色 B #F59E0B（琥珀色），比例 50%输出
#9B9E7D — rgb(155, 158, 125)恰好在 50% 时，每个 RGB 通道都是两种输入颜色对应通道的算术平均值。
常见问题
为什么这和实际调和颜料的效果不一样？
颜料混合是减色法（色素会吸收光线），效果取决于具体使用的色素——比如蓝色和黄色颜料混合会得到绿色。这个工具是以加色/线性方式混合光（RGB 通道），这正是屏幕、CSS 渐变以及大多数数字设计工具混合颜色的方式。这两套系统本就设计为会产生不同的结果，并非误差。
这和两种颜色之间的 CSS linear-gradient 效果一样吗？
是的——CSS 的 linear-gradient(颜色A, 颜色B) 采用与本工具相同的方式对 RGB 通道做插值，因此那条渐变中点处的颜色与这里 50% 比例的结果是一致的。
为什么混合出来的颜色有时看起来发浑或发灰？
在 RGB 空间中混合两种饱和度高但色相相差很大的颜色（比如蓝色和橙色，属于近似互补色）通常会得到一个低饱和度、偏灰褐色的中间色——这是 RGB 插值的真实特性，不是 bug。如果想要更鲜艳的混合效果，可以尝试选择在色轮上更接近的两种颜色，或者改在 HSL 空间中混合，调整色相同时保持高饱和度（本工具的纯 RGB 混合方式不支持这种做法）。
可以一次混合三种以上的颜色吗？
单次操作不行——本工具只混合两种颜色。如果要合并三种颜色，先按所需比例混合前两种，复制结果，再把它作为新的颜色 A 与第三种颜色混合。分步操作也能让你对每一步的权重有更精细的控制，这是一次性三色平均做不到的。
我该用这个工具还是颜色明暗生成器？
如果你需要的是介于两种不同颜色之间的过渡色——比如品牌蓝和强调琥珀色之间的过渡色——用这个混合器。如果你需要的是同一种颜色更浅或更深的变体（悬停状态、背景色，或类似 Tailwind 的 50-900 色阶），请改用颜色明暗生成器：它保持色相和饱和度不变，只改变亮度，因此所有结果都能清晰地保持在同一色系内。
输入框里可以输入哪些颜色格式？
文本框接受 6 位 HEX 代码，带不带前面的 # 都可以（例如 3B82F6 或 #3B82F6）。三位简写 HEX、rgb() 表示法以及 CSS 颜色名称在这里不会被解析——不过你可以用每个输入框旁边的原生取色器直观地选取任意颜色，HEX 字段会自动同步更新。