Coolors
快速配色方案生成。
Coolors 是专门做配色方案的工具,主打「几秒钟生成一套能用的色板」。它的价值不是给你灵感,而是把「选颜色」这件事流程化——生成、锁定、微调、检查对比度、导出,一条链路走完。
适合谁
- 做设计时需要快速定一套配色
- 建立品牌色板或产品色板
- 检查文字与背景的对比度是否达标
- 从一张图片里提取配色
核心能力
- 一键生成配色:按空格键不断生成新方案,遇到满意的锁定该色继续生成其余
- 图片取色:上传图片自动提取主色调
- 从已有颜色延展:锁定主色后生成和谐的配色方案
- 对比度检查:检查前景/背景组合是否达到无障碍标准
- 导出多样:PNG、PDF、CSS、SCSS、SVG、设计工具插件等
- 探索社区配色:浏览他人分享的配色方案
上手要点
- 先定主色再让工具延展。全随机生成的方案往往「好看但不符合品牌调性」——先锁定品牌主色,再让它补全其余色位,结果才可用。
- 务必过一遍对比度检查。正文字号下对比度不足是最常见也最容易被忽略的可访问性问题,深色模式尤其要单独验。
- 配色数量不要多。一套界面配色通常 1 个主色 + 1–2 个辅助色 + 中性灰阶就够,色位越多越难控制。
- 导出成代码或变量。拿到色板后直接导出 CSS 变量或设计工具变量,避免手工抄色值出错。
- 工具给的是「和谐」不是「对」。品牌色、行业惯例、文化含义这些它不懂,最终要人来判断。
定价与限制
核心功能免费使用;注册后可保存配色;部分高级功能与团队能力需付费。具体以官网当前说明为准。
同类怎么选
| 需求 | 更合适 | |---|---| | 快速生成 + 对比度检查 | Coolors | | 参考现成配色方案 | Color Hunt | | 与 Adobe 生态联动 | Adobe Color | | 中国传统色 | 中国色 / 观复色 |
常见问题
生成的配色能直接用在项目里吗?
可以作为起点,但要人工调整——尤其是确保正文与背景的对比度达标、色位数量控制在合理范围。另外要注意品牌既有的颜色规范,生成方案不能与之冲突。
怎么检查配色是否可读?
用它的对比度检查功能,把文字色和背景色放进去测。一般要求正文达到较高的对比度等级,大号标题可以略低。深色模式需要单独再验一遍,浅色下达标的组合在深色下未必成立。
免费吗?
核心的生成与探索功能免费,不需要注册也能用;保存配色、部分导出与团队功能需要注册或付费。做设计时用免费功能基本够。
替代选择
- Color Hunt —— 现成配色方案合集
- Adobe Color —— 与 Adobe 生态打通
- 中国色 —— 中国传统色,做国风项目有用