配色与主题生成
从任意基色生成互补色、类似色、三色组等和谐配色方案。可直接用于设计和开发。
此转换仅在您的浏览器中运行，不会上传任何内容。
- 基色#3b82f6
- 互补色#f6af3b
仅不透明色（HEX / RGB / HSL），无 alpha。可粘贴 #rgb 简写或完整 #rrggbb。
基色
#3b82f6
互补色
#f6af3b
近似色
#3bdff6
#523bf6
三色
#f63b82
#82f63b
分裂互补色
#f6523b
#dff63b
这个工具是什么？
从基准 HEX（#rgb 或 #rrggbb）通过 HSL 色相旋转生成互补色、类似色、三色与分裂互补色板，并可复制色块或 CSS 变量块。
不能替代品牌色规范或对比度检查器。上线前请单独验证文字对比与语义角色。
常见用途
- 用产品主色 HEX 起草界面强调色
- 导出原型用的
--color-*CSS 变量 - 评审前快速比较互补色与分裂互补色
如何使用
- 用取色器或输入 HEX 设定基色。
- 查看基色 / 互补 / 类似 / 三色 / 分裂互补分组。
- 点击色块复制 HEX，或复制 CSS 变量块。
- 生产前在本工具外校验对比度与品牌契合度。
示例
| 输入 / 设置 | 输出 | 说明 |
|---|---|---|
#3b82f6 | 互补 #f6af3b；类似 #3bdff6, #523bf6 | 示例蓝 |
#ff0000 | 互补 #00ffff；三色 #00ff00, #0000ff | 纯红 → 青互补 |
#808080 | 全部 #808080 | 饱和度 0 — 色相旋转无效 |
实践中的常见误区
- 生成色板不是已批准的品牌指南。
- HSL 等角度在感知上不均匀（与 OKLCH 不同）。
- 无彩色基色会使所有分组落到同一 HEX。
参考资料
最后审阅: 2026-07-27
常见问题
- 会生成哪些和谐类型？
- 互补色（+180°）、类似色（±30°）、三色（±120°）、分裂互补色（±150°），饱和度与亮度保持与基色相同。
- 可以导出 CSS 变量吗？
- 可以。复制 `:root` 自定义属性块，或点击色块复制 HEX。
- 能替代品牌色规范吗？
- 不能。这只是色相环探索起点；角色命名、对比度与深浅模式仍需单独校验。
- 灰色基色为什么色块都一样？
- 饱和度接近 0 时旋转色相不会改变颜色，黑白灰会让所有和谐落到同一 HEX。