配色与渐变工具清单|调色板生成 对比度检测 一键导出

整理一组常用的配色与渐变工具,从调色板生成、对比度与无障碍检查,到配色提取与导出,覆盖从灵感到落地的关键环节。

Coolors

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

免费商用:在线生成与微调调色板,支持锁定颜色、自动生成配色、导出多种格式。

Adobe Color

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

需看协议:经典色轮与配色规则(互补、三分、类比等),可保存主题并与 Adobe 生态联动。

Huemint

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

免费商用:基于样式场景生成配色方案,适合快速得到「能用」的 UI/品牌色组合。

Colormind

工具地址:http://colormind.io/

免费商用:通过模型生成配色,支持从图片提取主色并生成一组可扩展的调色板。

Happy Hues

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

免费商用:提供现成的配色示例与界面预览,帮助你判断颜色在真实布局里的效果。

Paletton

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

免费商用:老牌色轮工具,能快速生成多色阶方案,并预览在常见 UI 模块中的表现。

WebAIM Contrast Checker

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

免费商用:输入前景/背景色即可计算对比度与 WCAG 等级,适合做无障碍快速校验。

Accessible Colors

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

免费商用:在满足对比度的前提下自动调整颜色,减少「好看但不可读」的踩坑。

color.review

工具地址:https://color.review/

免费商用:对比度与可读性评估工具,适合快速检验按钮、文字与背景组合。

Gradient Hunt

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

免费商用:渐变灵感库,可直接复制 CSS 渐变代码,适合做背景/主视觉快速出稿。

uiGradients

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

免费商用:简洁的渐变配色集合,一键复制 CSS/HEX,适合做界面氛围色。

WebGradients

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

免费商用:提供大量预设渐变并支持导出,适合做海报、Banner 或轻量 UI 背景。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

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

操作成功