配色与色彩工具清单|取色、调色板与对比度检查

做配色时,最浪费时间的往往不是“想一个颜色”,而是把颜色系统化:主色/辅助色/中性色怎么配?不同页面状态怎么扩展?在浅色/深色模式里怎么保持一致?下面整理了一份常用的配色与色彩管理在线工具清单,覆盖取色、调色板生成、配色灵感、色彩空间转换与对比度(无障碍)校验,方便你快速搭建一套可复用的色彩工作流。

Coolors

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

免费商用:调色板生成与快速锁定配色的“滚轮式”工作流。
支持导出 ASE/PNG/PDF 等,适合做品牌色、插画色板、UI 主题色的初稿。

Adobe Color

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

需看协议:提供色轮、和谐规则、趋势色与社区配色库。
适合用规则(互补/三角色/类似色等)推导一组结构清晰的配色。

Color Hunt

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

免费商用:高频更新的配色灵感库,按热度/最新筛选。
适合在没有方向时先用“氛围”找参考,再回到设计系统里做收敛。

Happy Hues

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

免费商用:每组配色都给出页面示例,能直观看到文字、按钮、背景的搭配。
适合 UI/网页项目从示例反推主色、背景色和强调色的比例。

Huemint

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

免费商用:基于生成模型的配色建议,可针对 UI/海报等场景输出组合。
适合做“第二意见”,在你已有主色的情况下补齐辅助色与中性色。

Colormind

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

免费商用:支持从图片取色并生成配色,也能锁定部分颜色再补全。
适合把摄影/插画的氛围色快速转成可用的色板。

Paletton

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

免费商用:经典色轮工具,可查看不同和谐方案下的色彩关系。
适合在品牌色已定的情况下推导互补色、强调色与层级色。

ColorSpace

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

免费商用:输入一个颜色即可生成多种色板方案与渐变方案。
适合做产品主题色扩展,快速得到可用于背景/卡片/渐变的组合。

Khroma

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

需看协议:通过选择偏好颜色来“训练”你的色彩喜好,然后推荐组合。
适合长期项目建立一致的审美偏好库,减少每次从零开始挑色。

Leonardo 对比度与可读性

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

免费商用:把“对比度达标”当作约束来生成色阶与主题色。
适合做深浅色模式、状态色(hover/active/disabled)与文本色的系统化推导。

OKLCH Color Picker

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

免费商用:用 OKLCH 这种更符合人眼感知的方式选色与调亮度/饱和度。
适合做“同一色相不同明度”的色阶,减少传统 HSL 带来的偏色问题。

Contrast Ratio by Lea Verou

工具地址:https://contrast-ratio.com/

免费商用:快速计算前景/背景的对比度并给出 AA/AAA 结果。
适合在落地阶段批量校验文字颜色、按钮文字与图标的可读性。

WebAIM Contrast Checker

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

免费商用:WCAG 对比度检查的常用参考工具,结果直观稳定。
适合做设计评审时的“标准答案”,避免不同工具结论不一致。

CSS Gradient

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

免费商用:可视化生成渐变并直接输出 CSS 代码。
适合做背景渐变、按钮高光、卡片氛围层等需要可复制代码的场景。

使用建议:先用灵感库/生成器拿到 3-5 组候选色板,再用 OKLCH/对比度工具把色阶与文本颜色“约束到可用”,最后把主色、强调色、状态色和中性色落到设计系统变量中,后续迭代会轻松很多。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

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

操作成功