颜色混合器
新以任意比例混合两种颜色，并复制结果或任一中间色。
Click a swatch to copy its hex.
Mix colors from an image
Upload an image, choose a target color above, then click the image to sample that pixel. Images are decoded in your browser and never uploaded.
Paint (subtractive) results are realistic approximations of pigment mixing, not exact recipes — real paints and inks vary by brand and opacity.
Runs entirely in your browser. Nothing is uploaded.
适用于颜料或光的免费在线颜色混合器
这个颜色混合器将两种颜色——或更多——混合成新颜色，并显示它们之间步骤的完整渐变。用色板选择颜色、输入hex代码，或直接从上传的图片中提取颜色；然后以HEX、RGB、HSL和CMYK格式读取混合结果。所有操作都在浏览器中运行，即时响应，您上传的任何内容都不会被发送到服务器。
大多数工具只做简单的线性混合，而这个工具让您以三种不同方式在线混合两种颜色，并实时显示差异——让您得到画家所期望的结果、屏幕所产生的结果，或用于渐变和设计系统的纯数学中点。
减法、加法或简单混合——三种混合模型
减法混合模拟颜料和染料：颜色吸收（减去）光线，因此蓝+黄=绿、红+黄=橙、红+蓝=紫——这些直观的"两种颜色混成X"结果与实体颜料、墨水和CMYK印刷相符。加法混合模拟光线：红、绿、蓝叠加，因此红+绿=黄，三者全加得白色——屏幕、投影仪和舞台灯光就是这样工作的。
第三种模式混合是直接线性插值，对RGB通道取平均值以找到精确的数值中点——非常适合渐变、UI色调和设计令牌生成。单个按钮可在三者之间切换，混合条立即重绘，让您看到蓝到黄的颜料混合如何在减法中点通过真实的绿色。
两种颜色混成绿色、橙色、紫色和棕色？
内置的颜色混合图表一键回答最常搜索的颜料问题：蓝+黄=绿、红+黄=橙、红+蓝=紫、蓝+绿=青色，以及像橙+蓝这样的互补色混出真实的棕色。点击图表中的任意一对，在减法模式下将其加载到混合器中，查看精确的十六进制结果。
因为减法引擎的混色方式与实际颜料相同，二次色输出真实，三次色自然地向棕色加深——就像过度混合真实颜料时产生的混浊效果。比例滑块让您精确控制比例：70%红+30%蓝比50/50混合产生更温暖、更偏品红的紫色。
从图片取色混合——以及混合两种以上颜色
上传任意照片，使用吸管直接从中提取颜色——非常适合从产品照片、色样或灵感图片中匹配品牌颜色。选择两个或多个像素并混合它们。图片在HTML画布上本地解码，因此从图片混合颜色意味着您的文件永远不会离开设备——适用于保密品牌资产和未发布的设计原型。
需要混合两种以上颜色？点击"添加颜色"添加第三、第四、第五或第六个色样，每个都有自己的权重滑块。工具返回所有输入的加权混合——可用于平均调色板、重建多颜料混合，或找到一组品牌颜色的视觉中心。
与Adobe Color、Coolors和colordesigner.io的对比
Adobe Color（color.adobe.com）专为色彩和谐探索而设计——互补色、三角色、类似色——需要Adobe账户，会将数据同步到Adobe服务器。它没有减法（颜料）或加法（光）混合模型，也没有用于混合特定十六进制代码的比例滑块。Coolors（coolors.co）非常适合调色板生成，但其颜色混合器只进行基本线性混合——相当于本工具的"混合"模式。
colordesigner.io提供两色线性混合和渐变条，但只输出十六进制值——没有RGB、HSL或CMYK——缺乏基于物理的混合模型。本工具填补了这一空白：三种混合模型、四种同步输出格式、图片颜色采样、最多六种颜色的独立权重滑块，以及可分享的URL。无需账户、无使用限制、无服务器上传。
每种代码随时可复制——以及可分享的链接
结果卡片显示混合颜色的HEX、RGB、HSL和CMYK值以及最接近的CSS命名颜色，单击即可复制任意一个到剪贴板。在两种颜色之间生成2–20个均匀分布的中间色样，复制单个步骤，或一次性获取整个序列以用于CSS渐变或设计系统色阶。可分享的URL可捕获您的颜色、比例和模型，方便与同事或客户分享。
无需安装任何软件，无需创建账户。颜色混合、图片采样和代码转换全部在浏览器中本地完成——您的颜色和图片保留在您的设备上。将此在线颜色混合器添加到书签，并与UtiloKit上的调色板生成器和对比度检查器配合使用，打造完整的零上传颜色工作流程。
Frequently asked questions
如何在线混合两种颜色？
用色板选择两种颜色或输入十六进制代码，选择混合模型（颜料/减法、光/加法或简单线性混合），然后拖动比例滑块——例如30%/70%——控制每种颜色对结果的贡献。混合颜色及其HEX、RGB、HSL和CMYK代码即时更新；点击任意格式行将其复制到剪贴板。无需创建账户、无需安装应用，也没有文件大小限制。
哪两种颜色混合成绿色？
混合颜料或染料时，蓝色和黄色混合成绿色（减法混合）。将模型设置为减法，将#2563EB之类的蓝色与#FACC15之类的黄色混合，得到约#61A73A的绿色。在屏幕上混合光（加法）时规则不同——红光+绿光=黄色，三者最大强度=白色。
加法混色和减法混色有什么区别？
加法混色合并光线：红、绿、蓝通道相加，因此红+绿=黄，三者全功率=白色。屏幕、投影仪和电视都是这样工作的。减法混色合并颜料或染料，它们吸收（减去）光的波长；添加的颜料越多，颜色越深。蓝+黄=绿，三原色全部混合产生棕色。CMYK印刷是减法的。
如何混合两个十六进制颜色？
在各自的字段中输入或粘贴十六进制代码——带或不带前导#——例如#FF5733和#33C1FF。混合器立即按当前比例混合它们，并返回结果十六进制代码及其RGB、HSL和CMYK等效值。也接受#F53之类的三位数简写十六进制。点击任意结果行进行复制。
可以从图片中混合颜色吗？
可以。打开"从图片混合"面板，上传任意照片或设计截图，然后点击画布将颜色直接从图片采样到您的颜色槽中。图片使用JavaScript在浏览器中的HTML画布上本地解码——不会向任何服务器发送数据，您的图片在设备上完全保密。
可以在两种颜色之间生成多少个渐变步骤？
步骤控制让您在两种输入颜色之间生成2到20个均匀分布的色样。十一个步骤给出两个端点加九个中间点——非常适合构建CSS渐变或设计系统的完整色阶。点击生成条中的任意单个色样复制其十六进制代码，或使用"全部复制"一次性获取整个序列。
免费吗？需要注册吗？
不需要。颜色混合器完全免费，无需账户、无需注册、无付费墙、无使用限制。打开页面立即开始混合。与某些设计平台将高级颜色混合锁在订阅后面不同，这里的每项功能——减法和加法模型、图片采样、多色混合、渐变步骤和所有输出格式——在首次访问时就免费提供。
Related tools
查看全部工具
新 Color Token Generator
Generate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
取色器与转换器
选取颜色并在 HEX、RGB、HSL 与 OKLCH 之间转换。
新 色彩对比度检查器
检查文字与背景颜色之间的 WCAG AA/AAA 对比度。
新 CSS 渐变生成器
创建线性、径向与锥形 CSS 渐变，实时预览效果。
新 CSS 阴影生成器
构建多层 CSS box-shadow，含预设与实时预览。一键复制 CSS、属性值或 React 样式。
新 调色板生成器
生成互补色、邻近色、三角色与单色调色板。