配色决定了作品的第一印象，也直接影响可读性与品牌一致性。下面这份清单按「灵感/生成」「品牌色参考」「渐变」「对比度与无障碍」「落地管理」几个常见场景整理，打开即可用，适合做设计稿、做前端样式或做品牌色规范时快速选型。
工具地址：https://coolors.co/
免费商用：快速生成/锁定/微调调色板，支持导出 ASE/PNG、提取图片配色，适合作为日常配色起点。
需看协议：经典色轮与配色规则（互补/类似/三分等），可浏览社区主题并同步到 Adobe 生态（使用与账号/服务条款相关）。
免费商用：大量现成配色灵感，适合在品牌色没定之前快速找方向、做情绪板。
免费商用：以色轮为核心的配色生成器，能直观看到主色/辅助色在不同亮度下的组合效果。
工具地址：http://colormind.io/
免费商用：基于示例图/风格的配色生成，适合从「一张参考图」出发做整套 UI 颜色方案。
需看协议：可训练偏好并生成匹配的配色组合，适合想要长期固定审美方向时做个人配色库。
工具地址：https://www.happyhues.co/
免费商用：提供成套 UI 配色示例（背景/主按钮/文字/卡片等），适合做落地参考而不是只看色块。
需看协议：汇总大量品牌官方色值（HEX），适合做竞品对比或做品牌色扩展时查参考（注意来源与使用条款）。
工具地址：https://webgradients.com/
免费商用：现成渐变方案与 CSS 代码，适合做 Banner/按钮/背景的快速渐变选型。
工具地址：https://contrast-ratio.com/
免费商用：输入前景/背景色即可实时得到对比度与 WCAG 参考线，适合在定稿前做可读性校验。
工具地址：https://webaim.org/resources/contrastchecker/
免费商用：经典无障碍对比度检测工具，能快速判断 AA/AAA 是否达标，并给出失败原因。
需看协议：面向设计团队的无障碍与对比度插件/工具（常见于 Figma/Sketch 等），适合在团队流程里做系统化检查。
