颜色混合器
所有颜色工具
免费
将 2 或 3 种颜色按任意比例混合，像颜料或光线一样得到结果色，也可在两色间生成最多 10 步渐变，并复制 HEX、RGB、HSL、CMYK 值。
颜色 1
用量
50%
颜色 2
用量
50%
颜色 3
用量
50%
混合模型
配方
混合后的颜色
选择 2 或 3 种颜色并设置每种颜色的用量：混合后的颜色会即时在浏览器中计算。点击结果或任意数值即可复制。
起始颜色
结束颜色
步骤数
生成的过渡色数量（1–10）。
混合模式
渐变
混合调色板
选择两种颜色和步骤数：所有过渡色将即时在浏览器中计算完成。
关于 颜色混合器
颜色混合器可以让你看到混合两种或三种颜色后得到的颜色。选择颜色，设定每种颜色在混合中的占比，结果色会立即显示，并附带 HEX、RGB、HSL 和 CMYK 值，以及显示各颜色占比的配方条。
三种混合模型回答不同的问题。颜料模型像真实颜料一样混合，所以蓝色和黄色混合得到绿色，加一点黑色就会有很大变化。光线模型按屏幕和彩色灯光混合的方式取平均，所以红色和绿色混合得到黄色。感知模型在 CSS color-mix() 所用的 OKLab 空间中取平均，在界面和设计工作中能得到平滑、均匀的结果。
第二个视图"渐变步骤"可在 RGB 或 HSL 下，把起始色经由最多十个中间色阶渐变为结束色，并提供渐变预览和可直接粘贴的 CSS 渐变代码。一切都在浏览器中运行，无需服务器。
如何使用 颜色混合器
- 打开"混合颜色"视图，选择两种颜色，或用"添加颜色"加入第三种。
- 设定每种颜色的数量：旁边的百分比显示它在混合中的占比。
- 选择混合模型：颜料、光线或感知。
- 点击混合后的颜色或其任意数值即可复制，也可用"复制配方"保存比例。
- 切换到"渐变步骤"，在两种颜色之间生成最多 10 个色阶的渐变。
常见问题
是的。混合颜色免费且不限次数：该工具完全在浏览器中运行，无需账户、积分或服务器处理。
使用颜料模型，蓝色和黄色混合得到绿色，就像真实颜料一样。使用光线模型则得到浅灰色，因为屏幕混合的是它们的光，而不是颜料。在"混合颜色"视图中试试任意一对颜色，对比这些模型。
颜料模拟吸收光的颜料，所以混合后会变暗，蓝色加黄色得到绿色。光线在线性光中对颜色取平均，就像像素或彩色灯光的混合方式。感知在 OKLab 中取平均，结果均衡自然，并与 CSS color-mix() 一致。
可以。添加第三种颜色，然后为每种设定 1 到 100 的数量。数量是相对的，所以 2、1、1 会得到 50%、25%、25% 的混合。配方条和百分比会显示每种颜色的确切占比。
这是基于颜料吸收和散射光线方式的近似模拟，但真实颜料会因品牌、颜料成分和介质而异。可用它预测色相、试验比例，再用小样确认。
在"渐变步骤"视图中，RGB 混合直接对红、绿、蓝通道插值，混合对立色相时可能经过灰色。HSL 混合则沿色轮旋转，因此中间步骤能保持饱和度，看起来更鲜艳。
在"混合颜色"视图中以相同数量混合两种颜色：光线给出它们的物理平均值，感知给出视觉上的中点。在"渐变步骤"视图中，只设一步即可得到 RGB 或 HSL 渐变的中点。
热门搜索
颜色混合器
在线混合颜色
两种颜色混合是什么颜色
颜料调色
三种颜色混合
调色计算器
混合两种颜色
渐变步骤
颜色之间的渐变
调色工具
需要帮助？
使用此工具时遇到问题？请告诉我们的团队。