什么是颜色混合器？

用比例滑块将两种颜色混合，实时查看混合结果。输出 HEX、RGB 和 HSL 值，可直接复制到代码或设计工具中。

选两种颜色,挑一个混合模式——RGB、RYB、LAB、LCH、HSL 或 OKLCH,再拖动 0%~100% 的滑杆。RGB 在屏幕色彩空间里直接平均,速度最快,但中间值可能发灰;RYB 像真实颜料一样混合,所以蓝加黄得绿、红加黄得橙;LAB 和 LCH 在感知色彩空间里混合,跨色相过渡更平滑;OKLCH 是最新的、与 CSS 对齐的感知模型,中间值通常看起来最自然。输出包括 HEX、RGB、HSL、CMYK 以及最接近的颜色名称,还有针对黑白底的 WCAG 对比度读数和可复制的 CSS 线性渐变。25/50/75% 的快捷按钮让你一键跳到常用的混合点,无需精确拖动滑杆。

使用方法

1. 第一步——使用取色器选择第一种颜色，或输入其 HEX 值。
2. 第二步——选择第二种颜色，然后拖动混合比例滑块来控制混合程度（0% = 纯第一种颜色，100% = 纯第二种颜色）。
3. 第三步——查看混合结果及其颜色代码，复制所需数值。

何时使用

• 把品牌色和白或灰混合,做按钮 hover / disabled 状态。
• 为 CSS 渐变生成中间停驻点,避免中段发灰。
• 把两个品牌色按低比例混合,做柔和的提示色。

结果

一位设计师将品牌蓝 (#2196F3) 与白色 (#FFFFFF) 按 30% 比例混合，得到柔和的浅蓝色 (#A1C9F8) 作为 UI 组件的悬停态颜色。

常见问题

日常应该选哪个混合模式?

如果你的构建链支持,就用 OKLCH——它在感知上最均匀,也契合现代 CSS color-mix 规范。LAB 是次优选项,在设计工具里支持广泛。两色亮度接近时 RGB 也够用;LCH 对饱和度的保留最好;HSL 更适合做色相轮转,而不是平滑插值。

为什么 RGB 中间值有时偏灰、偏脏?

RGB 是数值平均,而不是感知平均。蓝色和橙色这种互补色,R、G、B 通道彼此抵消,中间就成了低饱和的灰。换 LAB 或 LCH,中间值能保持较高饱和度。若想要和调真实颜料一样的效果,就用 RYB 模式——它把蓝加黄混成绿色,而不是灰色。

和 CSS 的 color-mix() 有什么区别?

color-mix() 已经在新版浏览器里可用,支持 srgb、lab、oklab、lch、oklch。这里输出 HEX,可以贴到老样式表里;同时提供可视化滑杆,直接拖到想要的比例,不用猜百分比。

可以混合两种以上颜色吗?

一次只能两种,但可以串起来用:先把 A、B 混合得到 C,再把 C 跟 D 混合。如果想要三色平滑过渡,A→B 取 50%,B→C 取 50%,把两个中间值放在原本 B 的两侧当作渐变停驻点。

混合比例 0% 和 100% 各代表什么?

0% 是纯色 1,100% 是纯色 2,50% 是中间值。滑杆每步 1%,可以精细调整淡色或浓色——做 UI 状态时,10% 和 15% 的混合给人的感觉是不同的。

相关工具