【浏览器执行模式】 : 您的所有数据均在浏览器中处理,不会上传服务器,数据安全有保障。不放心的,可等待页面加载完成后 断网使用!(需提前登录账号)
【速度及稳定性】 : 处理速度由您的机器配置决定。由于浏览器差异,少数工具可能出现无法使用或异常:请使用:软件版工具
工具使用
返回旧版工具先设置,再处理
先确定主色与配色规则,再生成可导出的方案
可用示例色快速开始,也可以输入 HEX 精准取色。每一步都有下一步按钮,完成设置后再生成、保存和下载。
HEX / RGB / HSL / CMYK
单色调 / 互补色 / 三色组
CSS / SCSS / JSON / PNG
设置可保存
当前主色
点击色值可以复制
HEX
RGB
HSL
主色设置
请先设置主色。可以用取色器、HEX 输入框或 HSL 滑块,方案会随参数实时更新。
基础颜色支持 6 位 HEX
示例:#0F6FAE
CMYK
HSL 精调适合微调色相、饱和度和亮度
示例色点击后可继续调整
配色规则
请选择一种配色模型,再设置颜色数量和明暗偏移。建议先保持默认参数生成一次,再按设计场景微调。
配色模型类似色适合统一、柔和的视觉风格
生成参数先设置参数,再进入预览
预览微调
检查每个颜色的代码、文字可读性和界面示意。点击任意色值可复制。
配色方案5 个颜色
界面预览用于快速判断主次关系
渐变代码可直接复制到 CSS
保存导出
可导出当前方案,也可批量生成多个方案。批量结果只展示前 20 个,下载时会包含全部结果。
批量选项数量建议按需要设置
导出内容用于文件和代码
下载操作ZIP 会打包全部批量结果
批量结果尚未批量生成
请先完成主色和配色规则设置,再点击“批量生成”。
已保存方案0 个
保存后的方案会显示在这里,可重新应用或删除。
使用说明
软件使用说明
- 设置主色:在“主色设置”中使用取色器、HEX输入框或HSL滑块设置基础颜色,也可以点击示例色快速载入。
- 选择配色规则:
- 单色调:基于同一色相生成明暗层次,适合统一风格设计。
- 类似色:选择相邻色相,适合柔和、有层次的视觉效果。
- 互补色:使用色相环对侧颜色,适合突出按钮、标题和重点内容。
- 拆分互补:在对比关系中加入缓和色,适合运营图和活动视觉。
- 三色组、四色组、四方色:适合图表、分类标签和多模块界面。
- 中性色:适合商务页面、工具界面和文档类设计。
- 调整生成参数:设置颜色数量、邻近角度、饱和偏移、亮度偏移、中性化比例、排序方式和渐变角度。
- 预览配色方案:进入“预览微调”查看每个颜色的HEX、RGB、HSL和对比度信息,点击色值按钮即可复制。
- 保存方案和设置:点击“保存当前方案”可收藏配色方案,点击“保存设置”可保存当前参数,便于后续继续使用。
- 批量生成:进入“保存导出”设置方案数量和变化幅度,点击“批量生成”生成多组配色方案。界面展示前20个方案,下载时会包含全部结果。
- 导出文件:可单独下载JSON、CSS、SCSS、PNG文件,也可以选择导出内容后下载ZIP压缩包。
常见问题
答:单色调适合品牌延展和简洁界面;类似色适合柔和统一的页面;互补色适合强调重点信息;三色组适合图表和多模块布局;中性色适合商务工具和文档场景。
答:在HEX输入框中输入颜色代码,例如#0F6FAE,工具会同步更新取色器、HSL滑块和配色预览。也可以通过色相、饱和度、亮度滑块进行细调。
答:CSS文件会生成变量形式的颜色代码,可用于网页样式;SCSS文件适合Sass项目。两种格式都便于在设计系统、主题切换和组件样式中复用。
答:批量生成会基于当前主色、配色规则和变化幅度,对色相、饱和度、亮度进行合理偏移,从而得到多组风格相关但不重复的配色方案。
答:保存的方案会记录在当前设备的本地存储中。清理站点数据或更换设备后,之前保存的方案可能无法继续显示,建议对重要方案及时导出文件。
答:不会。颜色计算、方案保存和文件生成都在当前设备完成,主色、方案和导出内容不会上传到服务器。
答:在“预览微调”中查看每个颜色的白字对比和深字对比。数值越高,文字阅读越清晰。用于正文背景时,建议选择对比度更高的文字颜色。