做界面配色时,常见问题不是"找不到颜色",而是缺少一套可复用的流程:先收集灵感与候选调色板,再把主色/辅助色/语义色落到组件与状态里,最后用对比度与色盲模拟做无障碍校验。下面这份清单按"取色与调色板"、"渐变"、"对比度与无障碍"、"色盲与感知模拟"几类整理,方便你快速选工具、搭工作流。
需看协议:提供配色规则(互补/三分等)、主题浏览与提取图片配色,适合做品牌色探索与团队共识。
工具地址:https://coolors.co/
需看协议:一键生成调色板、锁定颜色继续迭代,并支持导出为多种格式,适合快速产出 UI 配色草案。
需看协议:社区热门配色合集,适合做灵感收集与风格对齐,配合关键词与排序快速筛选。
工具地址:https://www.happyhues.co/
需看协议:把配色直接放进示例页面组件中预览,能更直观看到主色/背景/文字的层级关系。
需看协议:经典色轮配色工具,适合用色相环推导同类色、互补色等组合,并观察不同明度下的效果。
工具地址:http://colormind.io/
需看协议:基于模型的配色生成器,可锁定部分颜色并持续生成候选方案,适合打破思维定势。
工具地址:https://khroma.co/
需看协议:通过训练你喜欢的颜色来推荐更符合偏好的组合,适合在特定审美方向上持续探索。
工具地址:https://m3.material.io/theme-builder
需看协议:根据主色生成整套语义色与组件色,并可预览在界面里的落地效果,适合做系统化主题方案。
需看协议:常用渐变配色集合,适合做 Banner、插画背景或卡片高光的快速选型与复制使用。
工具地址:https://gradienthunt.com/
需看协议:渐变灵感库,支持浏览与收藏,适合在不同风格(科技、清新、复古)里找方向。
工具地址:https://webaim.org/resources/contrastchecker/
需看协议:输入前景/背景色即可计算 WCAG 对比度等级,适合做文本、图标与按钮状态的无障碍验收。
工具地址:https://contrast-ratio.com/
需看协议:更偏产品化的对比度工具,支持直接拖动调色并给出达标提示,适合边调边测。
工具地址:https://accessible-colors.com/
需看协议:在保证可读性的前提下给出可用配色建议,适合快速修正不达标的文字与背景组合。
需看协议:面向设计师的无障碍套件(对比度、色盲模拟等),适合嵌入 Figma/Sketch 的日常检查流程。
需看协议:桌面端色盲模拟工具,可直接预览整个屏幕在不同色觉下的效果,适合做整页体验检查。
工具地址:https://michelf.ca/projects/sim-daltonism/
需看协议:macOS 上常用的色盲模拟与过滤工具,适合在实际应用界面里进行快速复核。
工具地址:https://projects.susielu.com/viz-palette
需看协议:面向数据可视化的调色与对比工具,适合校验多色组合在对比度与可区分性上的表现。
工具地址:https://colorbrewer2.org/
需看协议:经典数据可视化配色方案库,提供顺序/发散/定性等类型,适合做图表与仪表盘配色规范。