基于基准颜色，使用 6 种和谐规则生成配色方案，支持 CSS 导出
开发者工具
关于此工具
调色板生成器支持选取基准颜色，使用六种和谐规则即时生成 5 色配色方案：互补色、类似色、三色、分裂互补色、四色和单色。您可以锁定单个颜色、随机生成调色板，并将结果导出为 CSS 自定义属性——所有计算均在浏览器本地完成。
主要功能
- 六种和谐规则：互补色、类似色、三色、分裂互补色、四色、单色
- 取色器和 HEX 输入，精确选择基准颜色
- 锁定单个颜色，在切换规则时保持不变
- 一键随机生成调色板
- 点击颜色卡片即可复制 HEX 值
- 导出调色板为 CSS 自定义属性，一键复制
使用场景
- 为网页和应用设计项目构建协调的配色方案
- 通过比较不同和谐规则探索色彩理论
- 为设计系统主题生成 CSS 自定义属性
- 创建包含互补色和强调色的品牌调色板
- 快速原型设计亮色和暗色模式的 UI 颜色变体
color
palette
harmony
常见问题
有哪些和谐规则可用？
工具提供六种和谐规则：互补色、类似色、三色、分裂互补色、四色和单色。每种规则根据色彩理论原理生成 5 色配色方案。
可以锁定调色板中的特定颜色吗？
可以，每个颜色卡片都有锁定按钮。锁定颜色后，即使切换和谐规则或随机生成调色板，该颜色也会保持不变。再次点击锁定按钮即可解锁。
如何将调色板导出为 CSS？
点击导出 CSS 按钮，即可生成包含当前调色板颜色的 CSS 自定义属性（--primary、--light、--dark、--accent、--accent-light）。然后可以一键复制 CSS 代码。
可以复制单个颜色吗？
可以，点击任意颜色卡片即可将其 HEX 值复制到剪贴板。复制成功后会显示提示通知。每个卡片还会显示 RGB 和 HSL 值供参考。
我的颜色数据会发送到服务器吗？
不会。所有调色板生成和颜色计算均在浏览器本地完成，不会上传任何数据到服务器，确保您的信息完全私密和安全。