对比 · 核对日期 2026-10-25
最佳免费配色与对比度工具
好的配色工具应当能从图片中找到颜色，基于一种颜色生成和谐配色，检查文字是否清晰易读，并把配色交给你的设计或代码工具。下面根据各家官网，列出每款工具的功能。
我们开发的 Slop Colors 是本页列出的工具之一。关于其他工具的所有事实，均来自其官方页面（每款下方均附链接），内容以 2026-10-25 时的为准。价格和功能会变化，选择前请以各官网为准。
我们如何进行对比
- 免费使用，以及账户或套餐增加了什么
- 从图片中取色
- 基于一种颜色生成和谐配色与色阶
- WCAG 对比度检查
- 导出文件（CSS、Tailwind、ASE、GPL）
一览
| 工具 | 价格 | 运行环境 | 从图片中取色 | 对比度检查 |
|---|---|---|---|---|
| Slop Colors 我们的 | 免费，无需账户 | 任何现代浏览器 | 吸管和主色（k-means） | 对比度、AA 和 AAA，并提供修正 |
| Coolors | 免费版；Pro 版 | 网页、iOS 应用、Figma 插件、Chrome 扩展 | 图片取色器 | 对比度检查器 |
| Adobe Color | 免费 | 网页 | 从图片中提取 | 对比度，并附 WCAG 指导 |
| WebAIM Contrast Checker | 免费 | 网页 | 否（用吸管从屏幕上取色） | AA 和 AAA，普通文字、大号文字和界面 |
| 功能 | Slop Colors 我们的 | Coolors | Adobe Color | WebAIM Contrast Checker |
|---|---|---|---|---|
| 从图片中取色 | 是 | 是 | 是 | 否 |
| 基于一种颜色生成和谐配色 | 是 | 未说明 | 是 | 否 |
| WCAG 对比度检查 | 是 | 是 | 是 | 是 |
| 大号文字和界面级别 | 是 | 未说明 | 未说明 | 是 |
| 色盲模拟预览 | 否 | 未说明 | 是 | 否 |
| CSS 导出 | 是 | 是 | 未说明 | 否 |
| Tailwind 导出 | 是 | 是 | 未说明 | 否 |
| Adobe .ase 导出 | 是 | 是 | 未说明 | 否 |
| GIMP .gpl 导出 | 是 | 未说明 | 未说明 | 否 |
| OKLCH 数值 | 是 | 未说明 | 未说明 | 否 |
| 无需账户 | 是 | 部分支持 | 部分支持 | 是 |
| 图片保存在你的设备上 | 是 | 未说明 | 未说明 | 是 |
1. Slop Colors（我们的）
最适合： 私密地从自己的图片中取色，检查对比度，并在一个页面中将配色导出为代码或色板文件。
优点
- 图片在浏览器中读取，从不上传
- 可导出 CSS 变量、Tailwind 配置、JSON、Adobe .ase 和 GIMP .gpl 文件，并能再次打开这些文件
- 支持 HEX、RGB、HSL、OKLCH 和 CMYK，超出色域的 OKLCH 颜色会映射到 sRGB
不足
- 没有可供浏览的共享配色库
- 没有色盲模拟预览
- 不能导出配色的 PDF 或图片
2. Coolors
最适合： 快速生成和浏览配色，拥有庞大的配色库，并提供设计工具插件。
优点
- 空格键生成器，并可浏览超过 1,000 万个配色
- 可导出 PDF、图片、CSS、ASE、SVG、代码和 Tailwind
- 配色可视化工具可在设计稿上预览颜色
不足
- 免费版最多保存 10 个配色；其页面将图片取色和高级导出列为 Pro 功能
Coolors 官网 · 来源： Coolors 首页
3. Adobe Color
最适合： 使用 Adobe 应用的设计师，希望在色轮上应用和谐规则，并把配色保存到自己的库中。
优点
- 在色轮上提供单色、互补色、类似色、三角色和分裂互补色规则
- 色盲模拟预览
- 可将配色保存到自己的库中，用于其他项目
不足
- 其色轮页面未提及导出文件
Adobe Color 官网 · 来源： Adobe Color，色轮
4. WebAIM Contrast Checker
最适合： 依据 WCAG 检查一组文字和背景的配色，并可分享检查结果的链接。
优点
- 可用亮度滑块调整任一颜色
- 结果提供永久链接和 JSON API
- 前景色支持透明度
不足
- 只检查一组配色，不生成或导出配色
WebAIM Contrast Checker 官网 · 来源： WebAIM 对比度检查器
如何选择
如果颜色来自你自己的图片，并且配色最终要用在代码或设计工具中，我们推荐 Slop Colors：吸管、主色、对比度检查和导出功能都在同一个页面，而且不上传任何内容。
如果你看重生成器、配色库和插件，可选择 Coolors；如果你需要色轮和 Adobe 配色库，可选择 Adobe Color；如果只需检查和分享一组配色，可选择 WebAIM 检查器。
常见问题
我需要多高的对比度？
WCAG AA 要求普通文字为 4.5:1，大号文字和界面元素为 3:1；AAA 要求分别为 7:1 和 4.5:1。这四款工具都会显示对比度数值。
哪种文件可以在 Photoshop 或 Illustrator 中打开？
Adobe Swatch Exchange（.ase）文件。Slop Colors 和 Coolors 都能导出这种文件。
我的图片会被上传吗？
Slop Colors 不会上传：图片在你的浏览器中读取。其他工具的隐私说明请自行查阅。
其他产品名称归其所有者所有。Slopographic 与它们没有关联。