配色工具清单|色板生成 对比度检测 渐变与品牌色灵感

做设计最容易卡住的环节之一就是“颜色怎么配”。这份清单汇总了常用的配色灵感、色板生成、渐变与无障碍对比度检测工具,覆盖从找灵感到落地校验的完整链路。

Coolors

工具地址:https://coolors.co/

需看协议:在线生成与保存配色方案,支持锁定单色后继续生成、导出 ASE/PNG/PDF 等,适合做快速探索与交付。

Adobe Color

工具地址:https://color.adobe.com/

需看协议:提供色轮配色规则、从图片提取主题色、社区配色浏览与收藏,适合做品牌色方向探索。

Color Hunt

工具地址:https://colorhunt.co/

需看协议:精选配色卡浏览与筛选,适合在早期阶段快速找到“像样的四配色”做情绪板。

Happy Hues

工具地址:https://www.happyhues.co/

需看协议:以页面示例呈现配色如何落在 UI 上(背景/强调色/按钮/文本),适合把色板直接转成界面方案。

Paletton

工具地址:https://paletton.com/

需看协议:经典色轮工具,可生成互补/类似/三角等关系色并预览在示例界面上,适合做系统性配色推导。

Khroma

工具地址:https://www.khroma.co/

需看协议:通过偏好训练生成你更可能喜欢的颜色组合,并支持按色值/情绪/用途检索,适合做个性化灵感库。

UI Gradients

工具地址:https://uigradients.com/

需看协议:渐变配色集合,提供 CSS 代码与色值,适合做活动页、banner 或轻量氛围背景。

WebGradients

工具地址:https://webgradients.com/

需看协议:渐变库与预设集合,支持复制色值与渐变代码,适合快速建立一致的渐变系统。

ColorSpace

工具地址:https://mycolor.space/

需看协议:输入一个主色即可生成配色、渐变与调色板延展,并给出可用的组件示例,适合从品牌色出发扩展体系。

WebAIM Contrast Checker

工具地址:https://webaim.org/resources/contrastchecker/

免费商用:输入前景/背景色即可校验 WCAG 对比度等级(AA/AAA),适合做正文与按钮的可读性兜底检查。

Accessible Colors

工具地址:https://accessible-colors.com/

需看协议:在保持设计意图的前提下自动调整颜色以满足对比度要求,并能输出一组更可访问的替代色。

Leonardo (Color)

工具地址:https://leonardocolor.io/

需看协议:面向设计系统的色阶生成与对比度可视化工具,适合做主题色、灰阶与状态色的成体系输出。

Material Design Color Tool

工具地址:https://m2.material.io/resources/color/

需看协议:基于 Material 体系生成主色/辅色与色阶,并提供预览与应用示例,适合做产品级 UI 的配色参考。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

暂无评论,快来抢沙发吧~

操作成功