HohoTools

颜色混合器

"这两个颜色中间是什么色"是设计里的高频问题：渐变的中间停靠点要过渡顺滑不出色带、插画配色需要一座过渡桥色、客户换标时想看新旧品牌色对半掺的样子、或者给中性色掺一点品牌色做出 30% 的倾向感。

50%

使用方法

  1. 输入第一个 HEX 色值，带不带 # 均可。
  2. 输入第二个 HEX 色值。
  3. 拖动比例滑杆（或直接输入百分比），读取混合结果的 HEX 与 RGB——0% 即第一个颜色，100% 即第二个颜色。

常见问题

混合色是怎么算出来的？

在 sRGB 通道上做线性插值：每个通道等于 A 色 × (1 − 比例) + B 色 × 比例，四舍五入到整数，其中比例为滑杆百分比除以 100。混合发生在伽马编码的 sRGB 空间（即 HEX 码直读的数值），与经典设计工具的混色行为一致，也和本站色阶生成器是同一口径。

sRGB 混合等于感知混合吗？

不等价，这里把口径说清楚。人眼对亮度的感知是非线性的，所以黑与白的 50% sRGB 混合是 #808080，看起来比感知意义上的中间点亮。OKLCH 这类感知空间在大幅色相扫掠时渐变更均匀；而 sRGB 通道混合更简单、可以手工复算，也是 CSS 过渡和多数设计工具的实际行为。

0% 和 100% 会怎样？

两个边界都是合法输入，不会报错：0% 时每个通道精确等于 A 色，100% 时精确等于 B 色。中间值在两者之间线性过渡——25% 表示掺入四分之一的 B 色，百分比始终显示在滑杆旁，复制哪个混合一目了然。

可以一次混合三个以上的颜色吗？

不能，工具刻意只混两个颜色，这样比例才有明确含义。要平均三个以上颜色，可以链式混合：先混 A 和 B，再把结果按选定比例与 C 混合，每一步都精确、可预期。

颜色会被上传吗？

不会。混合在你输入或拖动的当下由浏览器本地计算，任何内容都不离开设备，不存储、不进日志。

相关工具

颜色色阶生成器 一个品牌色很难直接撑起整个界面：放在按钮上要更深一档的悬停态，描边和阴影要再深几档，徽章、背景和暗色模式表面又要更浅的兄弟色。 实用工具 随机颜色生成器 这款免费的随机颜色生成器在浏览器本地生成均匀分布的随机 HEX 颜色，随机源是 crypto.getRandomValues——浏览器为密钥和令牌保留的加密安全随机数。 实用工具 HEX 转 RGB 设计师交接色板时给的是 #FFA500，而写动画、做混色、调用一个只认数字的接口时，你需要的是十进制通道值——HEX 与 RGB 本是同一种颜色的两种写法，但切换场景总要换一种表达。 实用工具 颜色对比度检查器 低对比度文字是网络上最常见的无障碍问题：在你校色过的屏幕上刚好看的灰底灰字，放到阳光下的廉价手机上、对低视力读者、对四十岁以上的人，都可能完全读不清。 实用工具 图片取色器 看得见却叫不出名字的颜色，是前端开发、幻灯片设计和照片修图里每天都在发生的问题。 图片工具
了解更多

"这两个颜色中间是什么色"是设计里的高频问题：渐变的中间停靠点要过渡顺滑不出色带、插画配色需要一座过渡桥色、客户换标时想看新旧品牌色对半掺的样子、或者给中性色掺一点品牌色做出 30% 的倾向感。这款免费的颜色混合器用一条 0-100% 的比例滑杆把两个 HEX 色混成一个精确的中间色。混合口径与色阶生成器完全一致：在 sRGB 通道空间做线性插值，每个通道按"A 色 × (1 − r) + B 色 × r"计算后四舍五入。比例是显式的而不是藏在黑盒里：滑杆拖到 25%，得到的就是精确的四分之一 B 色加四分之三 A 色，当前百分比始终显示在滑杆旁边。两个边界同样精确：0% 原样返回 A 色，100% 原样返回 B 色，没有舍入漂移，也不会报错。非法 HEX 输入会被明确拒绝并给出错误提示，而不是悄悄输出一个错误结果。全部计算在浏览器本地完成，不上传、不存储、不进日志。在下方输入两个颜色，找到它们之间的那个颜色。