配色是视觉一致性的底层基础：从取色、生成方案、做渐变，到最后的对比度与无障碍校验，最好有一套可重复的流程。下面这份清单按常见环节整理，方便你快速搭出可用的色彩系统，并在不同项目里复用。
工具地址：https://coolors.co/
需看协议：经典的配色方案生成与锁定工具，可快速导出 HEX/RGB/CMYK，并支持生成渐变与调色板分享。
需看协议：提供色轮、配色规则（互补/类似/三角色等）与社区方案，可用于快速建立主辅色与强调色组合。
需看协议：偏灵感库型的配色集合，适合先找情绪与风格，再把方案带回设计系统里做精修。
工具地址：http://colormind.io/
需看协议：通过模型生成配色方案，并支持基于图片取色后再补全剩余颜色，适合做探索与快速试错。
工具地址：https://www.happyhues.co/
需看协议：每套配色都会配一组页面示例，能直观看到背景、文字、按钮、强调色的实际落地效果。
需看协议：常用渐变预设库，直接复制 CSS 代码或取色值，适合做海报背景与小面积强调。
工具地址：https://webgradients.com/
需看协议：渐变预设集合，可快速对比不同风格的渐变，并导出适配 Web 的色值与样式。
工具地址：https://contrast-ratio.com/
需看协议：输入前景/背景色即可实时计算对比度与 WCAG 等级，适合在定稿前做最后的可读性校验。
工具地址：https://accessible-colors.com/
需看协议：帮助你在保持色相的前提下调整明度/饱和度，让颜色组合达到可访问性要求。
工具地址：https://yeun.github.io/open-color/
免费商用：一套开源的基础色板（多档位明度），适合作为设计系统的中性色与辅助色起点。
工具地址：https://material-foundation.github.io/material-theme-builder/
需看协议：基于主色生成一整套 Material 色彩方案，并输出设计 Token，适合做系统化配色推导。
工具地址：https://www.figma.com/community/plugin/829564945303827989/Pigments
需看协议：在 Figma 内管理调色板、生成渐变与导出变量，适合团队在同一套颜色资产上协作。
工具地址：https://leonardocolor.io/
需看协议：面向可读性的配色生成器，帮助你生成不同层级的前景/背景组合，并更容易满足对比度要求。
工具地址：https://tailwindcss.com/docs/customizing-colors
需看协议：了解常见色阶组织方式与命名方法，适合把一套调色板转成可复用的色彩 Token。
使用建议：先确定 1 个主色，再补齐中性色与状态色（成功/警告/错误），最后用对比度工具做无障碍复核；如果是品牌项目，务必把使用范围与禁用场景写进色彩规范里。
