配色方案生成器

在线生成设计配色方案,支持多种色彩和谐模式

纯浏览器处理,数据不经过服务器

色阶 Shades

导出代码


    

配色方案生成器介绍

本工具帮助设计师快速生成和谐的配色方案。支持三种生成方式:随机生成、基于指定颜色、从图片提取主色调。提供五色调色板,每个颜色显示HEX、RGB、HSL三种格式,点击即可复制。

色彩和谐模式

模式原理适用场景
类似色 Analogous色轮上相邻的颜色(间隔30度)柔和、统一的设计风格
互补色 Complementary色轮上相对180度的颜色强烈对比,突出重点
三色组 Triadic色轮上均匀分布的三个颜色(间隔120度)丰富活泼的配色
分裂互补 Split-Comp互补色两侧的颜色高对比但更柔和
单色 Monochromatic同一色相不同饱和度和亮度简洁专业的设计

常见问题

锁定颜色是什么意思?

锁定后点击"生成调色板"时,被锁定的颜色不会改变,只有未锁定的颜色会重新生成。方便您保留满意的颜色同时调整其他颜色。

从图片提取颜色是如何工作的?

工具会在浏览器中使用Canvas分析图片像素,通过颜色聚类算法提取出5个主要颜色。所有处理在本地完成,图片不会上传到服务器。

导出的CSS变量可以直接使用吗?

可以。导出的CSS自定义属性代码可以直接粘贴到项目的样式表中使用,SCSS变量格式同样兼容所有SASS编译器。