做设计时,配色不仅要好看,还要在不同屏幕与不同人群中保持清晰可读。这份清单整理了常用的取色、配色生成、对比度与无障碍校验、色彩转换与管理工具,适合做界面、海报与品牌延展时快速搭建可靠的色彩方案。
工具地址:https://coolors.co/
需看协议:配色生成与调色板管理很顺手,适合快速出方案;用于商业项目时请按其许可条款确认可用范围。
需看协议:提供配色规则与社区主题库,适合做品牌主色/辅助色探索;使用与导出请以平台条款为准。
需看协议:经典的色轮与和谐配色工具,适合做互补色、分裂互补、三角色等组合;商用前建议核对其使用条款。
工具地址:https://huetone.ardov.me/
需看协议:用更贴近 UI 的方式生成一套可用的色阶(浅/深/状态色),能更快落到设计系统里;许可条款以站点说明为准。
工具地址:https://accessible-colors.com/
需看协议:输入前景/背景色即可给出 WCAG 对比度结果,并提供可调整到合规的推荐色;用于项目时注意其数据与规则版本。
工具地址:https://webaim.org/resources/contrastchecker/
免费商用:对比度校验的常用基准工具,支持 AA/AAA 与大字标准快速判断,适合做设计评审与交付自检。
工具地址:https://contrast-finder.tanaguru.com/
需看协议:给定一个颜色后自动计算可通过对比度标准的候选色,适合在不改变品牌主色的前提下找可用文本色。
工具地址:https://www.colorhexa.com/
需看协议:提供 HEX/RGB/HSL/CMYK 等多种色彩表示转换与近似色、互补色参考,适合做色值规范与跨软件对齐。
需看协议:灵感型配色库,适合找氛围与方向,再回到系统化工具里做可用性校验;商用前请查看其授权说明。
工具地址:https://m3.material.io/theme-builder
需看协议:面向产品主题色的生成与预览工具,能直接看到组件在不同状态下的颜色表现;用于商业产品时请遵循相关条款。
工具地址:https://yeun.github.io/open-color/
需看协议:一套整理好的色板与色阶,适合直接作为设计系统的基础色库;落地前建议核对其许可证并保留必要声明。
工具地址:https://gka.github.io/chroma.js/
需看协议:前端色彩处理库,适合在代码里做插值、色阶生成与对比度计算,把“设计稿配色”稳定地变成“可复现的产品色彩”。