整理了一组常用的配色与色彩辅助工具,覆盖取色、调色板生成、渐变制作、无障碍对比度检测与品牌色管理。你可以先用取色/提取工具建立基础色板,再用对比度与模拟工具做可读性检查,最后把色板同步到设计稿与组件库中。
工具地址:https://coolors.co/
免费商用:在线生成调色板,支持锁定颜色、快速迭代、导出 ASE/PNG/URL,适合做方案初稿与提案备选。
需看协议:提供色轮/和谐规则、从图片提取主题色与社区配色灵感;适合与 Adobe 生态配合使用。
免费商用:高质量配色合集,按热度/时间筛选,适合快速找方向与做风格探索。
工具地址:http://colormind.io/
需看协议:基于数据集的配色生成器,可指定某些颜色并让系统补全其余颜色;适合做“既定主色 + 自动延展”的方案。
免费商用:经典色轮工具,可生成互补/类似/三分等配色,并预览在 UI 示例上,适合学习配色关系与快速验证。
工具地址:https://www.happyhues.co/
免费商用:用完整网页示例展示配色的落地效果(背景/文字/按钮/强调色),适合做界面配色参考与组件级复用。
免费商用:渐变方案集合,可一键复制 CSS 渐变代码或色值;适合用于海报背景与按钮强调。
工具地址:https://webgradients.com/
免费商用:大量预设渐变并支持下载/复制,适合做氛围背景与插画底色。
工具地址:https://webaim.org/resources/contrastchecker/
免费商用:对比度快速检测,输出 WCAG AA/AAA 结果;适合在定稿前检查正文/按钮/禁用态等关键文本可读性。
工具地址:https://accessible-colors.com/
免费商用:输入前景/背景色即可判断可访问性,并帮助你微调到合规区间,适合做品牌色在不同背景下的可读性修正。
免费商用:以更直观的方式展示不同人群(色觉缺陷、对比敏感等)在特定配色下的可用性,适合做设计评审时的说明材料。
工具地址:https://leonardocolor.io/
需看协议:用于构建可访问的色阶与主题体系,适合设计系统/组件库场景,把“一个主色”拓展成可用的多级色板。