颜色混合器
混合两种颜色并获得混合加上它们之间的每个步骤，格式为HEX、RGB和HSL。选择sRGB、Linear RGB或感知OKLab混合，设置每种颜色的不透明度，并复制匹配的CSS渐变。
输入
选择一种颜色，或直接输入HEX值。
生成多少个中间颜色。两种原始颜色始终包括在内。
sRGB与大多数混合器匹配；OKLab保持亮度均匀，避免浑浊的中间色。
输出
两种颜色按相等比例混合。
Your color palette will appear here.
每个计算的停止点都已写出，因此Linear RGB或OKLab渐变在纯CSS中保持。
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/color-mixer \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"startColor": "#2563eb",
"startOpacity": "100",
"endColor": "#f59e0b",
"endOpacity": "100",
"steps": "3",
"colorSpace": "srgb"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `color-mixer` tool (Color Mixer) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/color-mixer/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="颜色混合器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
这个工具做什么
颜色混合器混合两种颜色并显示它们之间的所有内容。选择开始颜色和结束颜色，选择您想要的步数，您将获得50/50混合、HEX、RGB和HSL的完整中间颜色斜坡，以及具有相同停止点的现成CSS渐变。
这是混合两种油漆的数字等价物 — 除了您可以同时看到每种中间色调，点击一下即可复制任何一种，并精确控制两种颜色的平均方式。
如何使用
- 设置开始颜色和结束颜色（使用拾色器或直接键入HEX值）。
- 拖动中间步数选择所需的中间颜色数。两种原始颜色始终包括在内。
- 可选地降低开始不透明度或结束不透明度以混合半透明颜色。
- 复制50/50混合，点击任何样本复制其HEX，或获取CSS渐变。
一切都在您的浏览器中运行 — 无上传、无账户、无限制。
选择混合色彩空间
这是大多数颜色混合器不提供的设置，它会大大改变结果。
- sRGB对原始通道数字进行平均。这是几乎每个混合器都做的，与人们的期望相符 — 但在两种饱和颜色之间混合通常会陷入浑浊、暗淡的中间。
- Linear RGB首先转换出sRGB的伽马曲线，混合实际的光，然后转换回去。这是光物理上如何组合的，所以中间部分保持更亮。
- OKLab在感知均匀的空间中混合。亮度和色调以恒定的视觉速率移动，所以坡道对眼睛来说看起来均匀分布 — 这是设计系统尺度和渐变的最佳选择。
蓝色到黄色是经典测试：在sRGB中中点向灰色漂移，而在OKLab中它看起来像真正的过渡。
为什么CSS渐变列出每个停止点？
浏览器插值两个停止点的linear-gradient()是在sRGB中执行的。如果您在Linear RGB或OKLab中混合，两个停止点渐变会丢弃它。写出每个计算的停止点会固定您实际选择的坡道，并在每个浏览器中都能正常工作。
8位HEX值意味着什么？
当混合颜色最终变得半透明时，工具会切换到#rrggbbaa（以及rgba() / hsla()），其中最后一对是alpha通道。完全不透明的颜色保持为熟悉的6位形式。不透明度总是线性混合的，与您选择的色彩空间无关。
如果我想要一种颜色的色调而不是两种颜色的混合怎么办？
使用Color Tint & Shade Generator，它将单一基础颜色朝向白色和黑色混合。对于具有角度和位置的多停止点渐变，请尝试CSS Gradient Generator，要从现有图像中提取颜色，请使用Color Palette Extractor。