配色与渐变往往决定了视觉的第一印象：同一套版式，换一组更克制的主色与更自然的渐变，就能显著提升质感与可读性。下面整理了 12 个常用的配色/渐变资源与检查工具，覆盖「灵感采集 - 生成 - 校验 - 导出」的完整链路；每条都标注了商用/署名注意点，选用前建议再对照官网条款确认。
工具地址：https://coolors.co/
需看协议：可免费生成与导出调色板，部分高级导出与团队功能为付费；商用与再分发以官方条款为准。
适合快速随机/锁定颜色生成方案，并导出 ASE、SVG、PNG 等格式。
需看协议：站点提供大量用户配色灵感，具体配色是否可作为品牌/产品商用不一概而论，建议按其说明与实际场景评估。
适合做快速风格探索，找到方向后再回到设计系统做色阶补齐。
需看协议：工具本身可用，但账号、社区配色与衍生使用的权利边界以 Adobe 条款为准。
适合按互补/三角色/分裂互补等规则生成配色，并用于品牌色与辅助色的推导。
工具地址：https://yeun.github.io/open-color/
免费商用：开源色板项目（通常为 MIT 许可），可用于产品界面配色参考与落地；使用前仍建议查看仓库许可文件。
适合搭建从 50-900 的色阶体系，快速补齐浅色/深色状态。
工具地址：https://m2.material.io/design/color/the-color-system.html
需看协议：这是设计规范与体系说明，适合作为方法论参考；品牌与商标相关限制以 Google 条款为准。
适合理解主色/强调色/语义色的分工，以及色彩可访问性的基本原则。
工具地址：https://tailwindcss.com/docs/customizing-colors
需看协议：作为框架文档提供色阶与用法示例，适合参考其命名与梯度组织方式；商用与再分发以其许可为准。
适合把颜色落到组件状态（hover/active/disabled）与暗色模式映射上。
需看协议：提供大量渐变预设与 CSS 代码，是否可用于商业项目与再分发请以官网说明为准。
适合快速找背景渐变方向，再根据品牌色做微调（亮度、饱和度与对比度）。
工具地址：https://webgradients.com/
需看协议：渐变集合的使用与再分发请对照其许可说明。
适合做插画/海报背景的快速试色，也可导出为 CSS/图片作为起点。
工具地址：https://gradienthunt.com/
需看协议：社区型渐变灵感收录，授权边界请以站点说明为准。
适合在做活动页与 Banner 时快速对比不同风格的渐变走向。
工具地址：https://webaim.org/resources/contrastchecker/
免费商用：对比度检查工具可直接用于项目自检与规范制定。
适合验证文本与背景在 WCAG AA/AAA 下的可读性，避免“好看但看不清”。
工具地址：https://contrast-grid.eightshapes.com/
免费商用：输入一组前景/背景颜色后，可一次性生成对比度矩阵，便于做设计系统验收。
适合检查一整套语义色（成功/警告/错误/信息）与多背景组合是否达标。
工具地址：https://gka.github.io/chroma.js/
免费商用：开源库（常见为 BSD 许可），可用于生成色阶、做渐变插值与色彩空间转换；使用前仍建议查看许可文件。
适合在前端/设计系统工具中自动生成 10-12 档色阶，保证过渡更均匀。
