配色方案生成器
从基础色生成调和的配色方案 — 补色、类似色、三色、四色、分割补色或单色 — 使用HSL色相旋转。获取调色板中每种颜色的HEX和HSL值。
输入
整个调色板的构建起点。
输出
Your color palette will appear here.
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/color-scheme-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"baseColor": "#FF0000",
"schemeType": "complementary"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `color-scheme-generator` tool (Color Scheme Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/color-scheme-generator/"
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 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
配色方案生成器从单一基础色开始构建协调的配色方案，并根据经典色彩理论规则围绕色轮旋转其色相。选择基础色和方案类型，获得调色板中每种颜色的HEX和HSL值 — 可直接用于设计工具、CSS文件或Tailwind配置中。
方案类型
- 补色 — 基础色加上其在色轮上的对立色（色相 + 180°）。高对比度，非常适合强调和行动号召。
- 类似色 — 基础色加上其两侧各30°的邻近色。位于色轮上相邻的颜色，产生平静、低对比度的调色板。
- 三色 — 三种颜色均匀间隔120°。充满活力且平衡，是活泼品牌调色板的常见选择。
- 分割补色 — 基础色加上其补色的两个邻近色（+150°和+210°）。对比度几乎与补色相同，但更柔和。
- 四色 / 方形 — 四种颜色均匀间隔90°。提供最大的多样性，因此通常需要一个主色和三个辅助色。
- 单色 — 同一色相在四个不同亮度级别（20%、40%、60%、80%）。用于UI明暗度的安全、统一的调色板。
使用方法
- 用颜色选择器选择基础色（或输入十六进制值）。
- 从下拉菜单中选择方案类型。
- 调色板表格即时更新，显示每种颜色的角色、十六进制代码和HSL值。
- 复制表格或下载为CSV，用于设计软件、CSS自定义属性或Tailwind主题。
所有处理在HSL色彩空间中进行：基础色转换为色相/饱和度/亮度，色相按照每个方案所需的固定偏移旋转，结果转换回RGB和十六进制。色相旋转在360°处换行，因此基础色相300°加上三色偏移120°正确地落在60°，而不是420°。
常见问题
为什么使用HSL而不是RGB？ 在HSL色彩空间中旋转色相可保持饱和度和亮度恒定，因此每个生成的颜色具有与基础色相同的强度和亮度 — 仅色相改变。在RGB中进行等效旋转要复杂得多，并且不能清晰映射到色轮理论的教学方式。
颜色之间的饱和度或亮度会改变吗？ 除单色外，所有方案都不会 — 仅色相改变，因此调色板中的所有颜色共享基础色的饱和度和亮度。单色保持色相和饱和度固定，而在四个固定步长中改变亮度。
我可以直接在CSS中使用生成的颜色吗？
可以。每一行都提供十六进制代码（#RRGGBB）和HSL字符串（hsl(h, s%, l%)），因此您可以将任一格式直接复制到样式表或设计令牌文件中。
我应该选择哪个方案？ 补色和分割补色适合在中性背景上单个强调。类似色和单色适合平静、统一的界面。三色和四色为需要多种不同颜色的插图、图表或品牌调色板提供更多多样性。
隐私
所有颜色数学在您的浏览器中本地进行 — 您的基础色和选择的方案永远不会发送到服务器。