配色决定了界面的第一印象，也直接影响可读性与品牌一致性。下面整理了 13 个常用的配色/调色板工具与色板资源站点：既有一键生成与智能推荐，也有从图片取色、品牌色查询、设计系统色板与可直接复用的开源色板。每条都附工具地址与授权提示，方便你在设计稿、组件库与前端样式中快速落地。
工具地址：https://coolors.co/
需看协议：在线生成与调整调色板，支持锁定某些颜色、自动推导相近色/对比色，并可导出为 ASE、PNG、PDF 或复制 CSS/SCSS 变量，适合快速探索方案。
需看协议：提供色轮与配色规则（互补、类比、三角等），也支持从图片/主题抽取色彩；适合做品牌主色与辅助色的系统化推演，并与 Adobe 生态联动。
需看协议：社区式精选配色集合，按流行、时间、主题筛选；当你需要“现成灵感”而不是从零推导时很省时间，可直接拷贝 HEX 进入设计稿。
工具地址：http://colormind.io/
需看协议：基于模型的配色生成器，可锁定 1-2 个关键色，让系统补全剩余色；适合做大面积 UI 的主辅色搭配，也可用于海报/插图的色调探索。
需看协议：经典的色轮配色工具，支持多种配色模式与明暗变化；适合需要“可解释”的配色推导过程，尤其是想把某个主色扩展成完整色阶时。
工具地址：https://www.happyhues.co/
需看协议：把配色方案放进真实页面组件示例中展示（背景、按钮、文字、卡片等），更接近实战；适合做落地页/产品页配色时快速判断对比度与层级关系。
需看协议：基于偏好训练的配色推荐工具，先选择你喜欢的颜色范围，后续会给出更贴近你审美的组合；适合长期做品牌或多项目时建立“个人色感库”。
工具地址：https://m2.material.io/design/color/the-color-system.html
需看协议：Material 的颜色系统与建议实践，包含主色/辅助色/语义色的组织方式；适合把配色做成可维护的设计系统，并在组件库里统一语义命名与状态色。
工具地址：https://yeun.github.io/open-color/
免费商用：开源色板，提供多组颜色的完整色阶（从浅到深），并给出可直接引入的 CSS/SCSS；适合前端项目快速建立基础色阶与灰阶体系。
工具地址：https://colors.eva.design/
需看协议：根据主色生成一整套语义色与明暗模式（light/dark），并导出为多种格式（CSS 变量、JSON、Sketch 等）；适合从品牌色快速落地到多端主题。
工具地址：https://uicolor.io/
需看协议：输入一个主色即可自动生成渐变与配色建议，并能直接复制 Tailwind 风格的色阶；适合做组件库/Design Tokens 时快速补齐 50-900 的色阶。
需看协议：整理了大量品牌的官方色值，支持搜索与一键复制；适合做竞品分析、品牌风格对齐或在内容设计中引用“熟悉的品牌色氛围”。
工具地址：https://www.webdesignrankings.com/resources/lolcolors/
需看协议：精选配色集合，提供简洁的浏览体验与直接复制色值；适合在缺乏方向时快速挑一组稳妥的配色，再结合项目语义色做二次扩展。
小提示：不论选哪套配色，落地前都建议做 3 个检查——（1）正文与背景对比度是否达标；（2）主要按钮/链接是否在不同背景上都清晰；（3）错误/警告/成功等语义色是否在暗色模式下仍可辨识。
