整理了20个常用的免费配色与调色板网站,覆盖灵感色卡、品牌配色、渐变生成与无障碍对比度检查。每条都附官网链接,并标注“免费商用/需看协议”,方便你快速找到合适的色彩方案。
工具地址:https://coolors.co/
需看协议
快速生成与锁定色板,支持导出 ASE/PNG;适合做品牌主色与UI配色初稿。
需看协议
色轮与配色规则(互补/三色等),可从图片提取配色;适合做系统化色彩方案。
需看协议
高质量配色组合瀑布流;适合找“现成好看”的UI配色灵感。
工具地址:https://www.happyhues.co/
需看协议
配色示例带真实页面预览;适合快速理解配色在页面里的落地效果。
需看协议
经典配色工具,可调色相/明度并生成系列色;适合做品牌色阶与辅助色。
工具地址:http://colormind.io/
需看协议
AI配色生成器,适合做“多场景配色候选集”;可作为灵感起点再人工微调。
工具地址:https://www.schemecolor.com/
需看协议
主题配色集合(节日/行业/风格);适合做活动页与专题页快速定调。
需看协议
配色/渐变/阴影/调色板集合;适合做Web UI快速找现成组件级色彩参考。
需看协议
输入一个主色生成可用的色阶;适合做设计系统的 50-900 色阶表。
需看协议
一键生成渐变与配色组合;适合做背景渐变与海报氛围色。
工具地址:https://gradienthunt.com/
需看协议
渐变配色集合;适合找“可直接用”的背景渐变方案。
工具地址:https://webgradients.com/
需看协议
渐变预设库;适合做页面背景与Banner氛围。
工具地址:https://www.grabient.com/
需看协议
可视化调节渐变角度与颜色;适合快速生成可复制的CSS渐变。
工具地址:https://accessible-colors.com/
需看协议
对比度检查与配色建议;适合做无障碍可读性校验。
工具地址:https://webaim.org/resources/contrastchecker/
免费商用
经典对比度检测工具;适合审核正文/按钮文字的可读性是否达标。
工具地址:https://leonardocolor.io/
需看协议
为对比度与可读性而设计的配色工具;适合做系统化可访问色板。
工具地址:https://material.io/resources/color/
需看协议
Material 配色与色阶参考;适合做移动端/组件库色彩基线。
工具地址:https://yeun.github.io/open-color/
需看协议
开源色板(含多级色阶);适合做产品色彩基建与前端变量。
工具地址:https://tailwindcss.com/docs/customizing-colors
需看协议
常用色阶参考;适合前端项目快速搭建色彩token(注意品牌差异)。
工具地址:https://nipponcolors.com/
需看协议
日本传统色卡;适合做东方/文艺风格配色灵感与命名参考。
提示:配色工具大多免费使用,但导出/商用/署名等规则可能随站点更新而变化;标注为“需看协议”的站点建议以官网 License/Terms 为准。