配色方案生成:工具与应用

用于生成协调的配色方案和渐变、从图片中提取颜色,以及检查文字与背景对比度的工具。先确定配色用在哪里:屏幕、印刷还是品牌规范,需要的颜色数值各不相同。

5 款应用信息有据可查

筛选

使用须知: 免费使用条件因工具和套餐而异。若卡片没有列出该工具特有的限制,请到官方页面确认额度、水印和导出条件。

Coolors

网页·设计与开发
有免费选项

Coolors 是一款配色生成工具,提供从图片取色、对比度检查、渐变,以及可浏览的共享配色库。

为什么适合

配色方案生成

Adobe Color

网页·设计与开发
请查看套餐条件

Adobe Color 是 Adobe 的配色工具,可在色轮上按和谐规则创建配色,从图片提取配色和渐变,并提供对比度检查和色盲模拟。

为什么适合

配色方案生成

Color Hunt

网页·设计与开发
请查看套餐条件

Color Hunt 是一个配色浏览站,设计师和艺术家可按颜色、情绪或主题浏览现成配色,并按最新、热门或随机排序。

为什么适合

配色方案生成

Leonardo Color

网页·设计与开发
请查看套餐条件

Leonardo 是 Adobe 的开源配色工具,可根据目标对比度生成色阶和自适应主题,从一开始就考虑可访问性。

为什么适合

配色方案生成

Adobe Express

网页·图像
请查看套餐条件

Adobe Express 可把移除照片物体与制作社交媒体版面结合起来。

为什么适合

配色方案生成

如何选择?

把配色放进真实的界面设计里试试:给标题、正文、按钮和提示设置颜色,并在浅色和深色主题下查看。如果工具提供色盲模拟,检查各颜色是否仍能区分。

请在官方页面确认可导出的格式(HEX、RGB、HSL、CSS 变量或设计软件专用文件),以及保存是否需要注册账户。若印刷需要 CMYK 或专色数值,要记住由屏幕颜色换算只是近似值。

怎样判断文字颜色是否足够清晰?WCAG 2 建议普通文字的对比度至少为 4.5:1,大号文字至少为 3:1。把文字色和背景色输入对比度检查工具;若低于标准,就把其中一种调深或调浅。

从照片里提取配色就够了吗?照片的主色是不错的起点,但未必能为界面中的文字和按钮提供足够的对比度。把提取的颜色用作点缀色,再加入中性色保证可读性。

比较有文档依据的功能

此比较基于已发布的官方文档,并非实际操作测试或质量排名。未知功能不视为已验证。

比较有文档依据的功能
应用名称在哪里使用?免费输出无需注册无水印离线可用批量处理内容语言使用须知 / 来源与核查日期
Coolors网页是是尚未核实尚未核实尚未核实尚未核实

说明 1说明 2

来源与核查日期
Adobe Color网页尚未核实尚未核实尚未核实尚未核实尚未核实尚未核实

说明 1说明 2

来源与核查日期
Color Hunt网页尚未核实尚未核实尚未核实尚未核实尚未核实尚未核实

说明 2

来源与核查日期
Leonardo Color网页尚未核实尚未核实尚未核实尚未核实尚未核实尚未核实

说明 2

来源与核查日期
Adobe Express网页尚未核实尚未核实尚未核实尚未核实尚未核实尚未核实

说明 1说明 2

来源与核查日期

适用于多个工具的说明

  1. 请分别核对各工具套餐,一项功能的额度不代表另一项。
  2. 请在官网确认当前配额和输出条件。