想把画面做得更高级,往往不是堆元素,而是把色彩关系、对比度与可读性打磨到位。下面整理一份配色与色彩管理相关的资源清单,覆盖调色板灵感、在线取色、渐变生成、对比度检测与色盲模拟等常用方向,适合做品牌、UI、插画或海报时快速找到可靠工具。
工具地址:https://color.adobe.com/zh/create/color-wheel
需看协议 Adobe 官方配色轮与配色规则(互补、三色、分裂互补等),也能从图片提取主题色,适合快速建立主色/辅色/点缀色关系。
工具地址:https://coolors.co/
需看协议 一键生成配色方案并锁定喜欢的颜色继续迭代,导出 PNG/PDF/ASE 等格式很方便,适合做界面与海报的快速探索。
需看协议 社区精选调色板库,按热门/最新快速浏览,适合在没有方向时先找氛围,再回到设计里做微调。
工具地址:https://www.happyhues.co/
需看协议 以完整页面示例展示配色落地效果(背景、文字、按钮、强调色),适合把“好看的色卡”转换成“可用的 UI 体系”。
需看协议 经典配色方案生成器,适合做互补/类比等配色推导,并可预览在示例界面中的对比效果。
工具地址:https://m3.material.io/styles/color/overview
需看协议 Material 3 的色彩体系与设计原则说明,适合需要构建一套“可扩展的颜色系统”(基础色、语义色、层级色)时做参考。
工具地址:https://accessible-colors.com/
免费商用 输入前景/背景颜色即可检测 WCAG 对比度,并给出可读性评级,适合做按钮文字、正文排版与图表配色校验。
工具地址:https://webaim.org/resources/contrastchecker/
免费商用 经典的对比度检测工具,给出 AA/AAA 结果与建议,适合在交付前做一轮快速“可访问性体检”。
工具地址:https://www.myndex.com/APCA/
需看协议 更贴近现代屏幕阅读体验的 APCA 对比度计算参考,用于对“浅色文字+深色背景”等场景做更细致的判断。
工具地址:https://colorable.jxnblk.com/
免费商用 在两种颜色间拖动调整,直观看到对比度变化,适合在品牌色/主题色不想大改的前提下找“刚好合格”的组合。
工具地址:https://www.color-blindness.com/coblis-color-blindness-simulator/
需看协议 上传图片并模拟不同色觉类型的显示效果,适合检查图表、状态色与提示信息是否在色盲场景下仍可区分。
免费商用 桌面端色盲模拟工具,可对整个屏幕进行模拟预览,适合做界面评审时快速验证信息层级与状态色。
工具地址:https://imagecolorpicker.com/
需看协议 上传图片取色并输出 HEX/RGB/HSL,适合从摄影、插画或竞品界面中快速提取一组可复用的主题色。
需看协议 可视化生成线性/径向渐变并输出 CSS 代码,适合做背景氛围、按钮高光或图形点缀的快速探索。
需看协议 渐变配色灵感库,适合在不改变主色体系的情况下,为 banner、卡片或插画增加更有层次的背景方案。
工具地址:https://yeun.github.io/open-color/
免费商用 一套经过整理的颜色调色板(多阶明度),适合在设计系统里快速选取一致的层级色并减少“凭感觉挑灰”。