做设计时,颜色是最容易被忽视、但最能拉开质感差距的一环。下面这份清单把常见的配色灵感、自动生成、渐变库与导出工具放在一起,适合在「找方向-定方案-落地到设计稿/代码」的每一步随手取用。
工具地址:https://coolors.co/
需看协议:快速生成配色方案,支持锁定某个颜色后继续推演,并提供多种导出格式(图片、ASE、CSS 变量等)。
需看协议:经典色轮与配色规则(互补、分裂互补、三角等),也能从图片提取色板,适合做配色推导。
需看协议:用偏好训练出更符合你审美的配色推荐,可按对比度、色相范围等筛选,适合长期积累个人风格库。
需看协议:社区驱动的配色灵感站,适合快速浏览趋势色板;选定后再带回设计系统做规范化。
工具地址:https://www.happyhues.co/
需看协议:把配色直接放进真实 UI 场景预览(背景、按钮、文本等),对 Web/产品设计很友好。
工具地址:http://colormind.io/
需看协议:基于模型的配色生成器,能固定部分颜色再生成其余颜色,适合做品牌色延展与多主题方案。
需看协议:偏“工程化”的色轮工具,适合用规则快速得到可用的色相组合,并观察在不同亮度/饱和度下的变化。
需看协议:常用渐变方案库,可直接复制 CSS 渐变代码,适合做页面背景、Banner 与氛围色。
工具地址:https://webgradients.com/
需看协议:数量很全的渐变集合,支持快速预览与复制,适合做组件背景与插画底色。
工具地址:https://gradienthunt.com/
需看协议:社区渐变灵感站,适合在需要“更有情绪”的色彩氛围时找参考。
工具地址:https://material-foundation.github.io/material-theme-builder/
需看协议:从品牌色生成一整套主题颜色(含色阶与对比度考虑),适合做系统化的浅色/深色主题。
工具地址:https://colors.eva.design/
需看协议:一键生成多色阶调色板,并提供可用的对比度检查思路,适合做设计系统的色板基建。