配色方案生成器
在线生成设计配色方案,支持多种色彩和谐模式
纯浏览器处理,数据不经过服务器
色阶 Shades
导出代码
配色方案生成器介绍
本工具帮助设计师快速生成和谐的配色方案。支持三种生成方式:随机生成、基于指定颜色、从图片提取主色调。提供五色调色板,每个颜色显示HEX、RGB、HSL三种格式,点击即可复制。
色彩和谐模式
| 模式 | 原理 | 适用场景 |
|---|---|---|
| 类似色 Analogous | 色轮上相邻的颜色(间隔30度) | 柔和、统一的设计风格 |
| 互补色 Complementary | 色轮上相对180度的颜色 | 强烈对比,突出重点 |
| 三色组 Triadic | 色轮上均匀分布的三个颜色(间隔120度) | 丰富活泼的配色 |
| 分裂互补 Split-Comp | 互补色两侧的颜色 | 高对比但更柔和 |
| 单色 Monochromatic | 同一色相不同饱和度和亮度 | 简洁专业的设计 |
常见问题
锁定颜色是什么意思?
锁定后点击"生成调色板"时,被锁定的颜色不会改变,只有未锁定的颜色会重新生成。方便您保留满意的颜色同时调整其他颜色。
从图片提取颜色是如何工作的?
工具会在浏览器中使用Canvas分析图片像素,通过颜色聚类算法提取出5个主要颜色。所有处理在本地完成,图片不会上传到服务器。
导出的CSS变量可以直接使用吗?
可以。导出的CSS自定义属性代码可以直接粘贴到项目的样式表中使用,SCSS变量格式同样兼容所有SASS编译器。