颜色工具

颜色混合器在线工具

输入两种颜色并拖动混合比例，系统会实时输出混合后的 HEX、RGB、HSL 和 CSS 写法，适合按钮状态色、品牌扩展色和活动页面过渡色设计。

实时混色

当前工具按 RGB 通道做加权平均计算，适合网页、设计系统和前端样式中的常见配色场景。

源色 A源色 B

源色 A 比例

混合比例

50%

源色 A 50% + 源色 B 50%

当前按 RGB 通道做加权平均计算。

如果你只是想交换左右颜色位置而保持结果不变，可以直接点击下面的“交换颜色”按钮。

支持为两端颜色分别输入 3 位或 6 位 HEX，再通过比例滑杆查看中间混色结果。

混色预览

#8F7696

当前结果来自源色 A 50% 与源色 B 50% 的 RGB 加权混合。

源色 A#FF6347

混合结果#8F7696

源色 B#1E88E5

混合 HEX: #8F7696
混合 RGB: 143, 118, 150
混合 HSL: 287, 13%, 53%
混合比例: A 50% / B 50%
CSS 背景色: background-color: #8F7696;

混色规则

颜色混合不是只有一种算法，本工具当前采用 RGB 空间的加权平均，结果更适合网页前端场景。

当源色 A 比例是 `50%`、源色 B 比例是 `50%` 时，三个 RGB 通道会做等权平均。
如果把源色 A 提高到 `70%`，混合结果会更偏向源色 A 的明度和色相表现。
不同设计软件在 HSL、Lab 或感知混色下结果可能略有差异，网页开发更建议统一到同一套规则上。

适合哪些场景

颜色混合器最常见于主题扩展、状态色生成和跨页面视觉统一。

把品牌主色和中性色混合，快速生成卡片底色、描边色和浅层强调色。
把两种活动色做中间过渡，找到更平衡的按钮或标签颜色。
在设计系统里为 hover、selected、disabled 等状态生成更连贯的色阶。

常见混色参考

下面这组预设可以帮助你快速比较两端颜色在不同比例下的混合结果。

名称源色 A源色 B比例结果

暖色海报#FF6347#F6BD60A 60% / B 40%#FB8751

品牌冷暖#1E88E5#FF7F50A 50% / B 50%#8F849B

自然绿金#2E7D32#D4A017A 65% / B 35%#688929

深色强调#1F2937#D85B32A 70% / B 30%#573836

使用建议

如果你的目标是正式上线的 UI 配色，混色之后不要只看结果色值，还要放到实际背景和文字场景里一起验证。

先用颜色混合器找一个中间色，再配合对比度检测确认它是否适合正文、按钮文字或标签背景。
如果结果色还需要继续做亮暗层级，可以再配合 HSL、HSV 工具细调饱和度和明度。
最终落地到组件库时，建议把常用混色结果沉淀为 token，而不是每次手工重新计算。

示例输入输出

示例重点展示不同混合比例对最终颜色结果的影响。

红蓝各半

适合快速得到中间过渡色或品牌辅助紫色。

输入

颜色 A

#FF0000 · 50%

颜色 B

#0000FF · 50%

输出

混合 HEX

#800080

混合 RGB

128, 0, 128

浅灰过渡

适合把黑白两端按比例混出中间灰阶。

输入

颜色 A

#FFFFFF · 20%

颜色 B

#000000 · 80%

输出

混合 HEX

#333333

混合 RGB

51, 51, 51

常见问题

颜色混合器更多用于解释混色结果、比例关系和设计协作差异。

50% 和 50% 混合是不是一定等于中间色？

在这个工具里，50% 和 50% 会按照 RGB 通道做等权混合，结果可以理解为两种颜色的中间过渡值。

为什么和某些设计软件混出来的结果会略有差别？

不同软件可能会在混色方式、色彩空间或透明叠加逻辑上处理得不同，所以结果接近但不一定完全一致。

颜色混合器适合做什么？

适合快速推导按钮 hover 色、品牌辅助色、过渡背景色，以及临时验证两种颜色混在一起的大致视觉方向。