Coolors

配色色板无障碍设计工具

快速配色方案生成。

定价
核心功能免费;保存与高级功能需注册或付费
平台
Web / iOS / Android / 设计工具插件
官网
coolors.co

访问 Coolors 官网 →

Coolors 是专门做配色方案的工具,主打「几秒钟生成一套能用的色板」。它的价值不是给你灵感,而是把「选颜色」这件事流程化——生成、锁定、微调、检查对比度、导出,一条链路走完。

适合谁

  • 做设计时需要快速定一套配色
  • 建立品牌色板或产品色板
  • 检查文字与背景的对比度是否达标
  • 从一张图片里提取配色

核心能力

  • 一键生成配色:按空格键不断生成新方案,遇到满意的锁定该色继续生成其余
  • 图片取色:上传图片自动提取主色调
  • 从已有颜色延展:锁定主色后生成和谐的配色方案
  • 对比度检查:检查前景/背景组合是否达到无障碍标准
  • 导出多样:PNG、PDF、CSS、SCSS、SVG、设计工具插件等
  • 探索社区配色:浏览他人分享的配色方案

上手要点

  1. 先定主色再让工具延展。全随机生成的方案往往「好看但不符合品牌调性」——先锁定品牌主色,再让它补全其余色位,结果才可用。
  2. 务必过一遍对比度检查。正文字号下对比度不足是最常见也最容易被忽略的可访问性问题,深色模式尤其要单独验。
  3. 配色数量不要多。一套界面配色通常 1 个主色 + 1–2 个辅助色 + 中性灰阶就够,色位越多越难控制。
  4. 导出成代码或变量。拿到色板后直接导出 CSS 变量或设计工具变量,避免手工抄色值出错。
  5. 工具给的是「和谐」不是「对」。品牌色、行业惯例、文化含义这些它不懂,最终要人来判断。

定价与限制

核心功能免费使用;注册后可保存配色;部分高级功能与团队能力需付费。具体以官网当前说明为准。

同类怎么选

| 需求 | 更合适 | |---|---| | 快速生成 + 对比度检查 | Coolors | | 参考现成配色方案 | Color Hunt | | 与 Adobe 生态联动 | Adobe Color | | 中国传统色 | 中国色 / 观复色 |

常见问题

生成的配色能直接用在项目里吗?

可以作为起点,但要人工调整——尤其是确保正文与背景的对比度达标、色位数量控制在合理范围。另外要注意品牌既有的颜色规范,生成方案不能与之冲突。

怎么检查配色是否可读?

用它的对比度检查功能,把文字色和背景色放进去测。一般要求正文达到较高的对比度等级,大号标题可以略低。深色模式需要单独再验一遍,浅色下达标的组合在深色下未必成立。

免费吗?

核心的生成与探索功能免费,不需要注册也能用;保存配色、部分导出与团队功能需要注册或付费。做设计时用免费功能基本够。

替代选择

设计资源里的其它条目