色彩与配色资源清单|调色板灵感 对比度检测 色盲模拟 在线取色

想把画面做得更高级,往往不是堆元素,而是把色彩关系、对比度与可读性打磨到位。下面整理一份配色与色彩管理相关的资源清单,覆盖调色板灵感、在线取色、渐变生成、对比度检测与色盲模拟等常用方向,适合做品牌、UI、插画或海报时快速找到可靠工具。

Adobe Color(原 Kuler)

工具地址:https://color.adobe.com/zh/create/color-wheel

需看协议 Adobe 官方配色轮与配色规则(互补、三色、分裂互补等),也能从图片提取主题色,适合快速建立主色/辅色/点缀色关系。

Coolors

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

需看协议 一键生成配色方案并锁定喜欢的颜色继续迭代,导出 PNG/PDF/ASE 等格式很方便,适合做界面与海报的快速探索。

Color Hunt

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

需看协议 社区精选调色板库,按热门/最新快速浏览,适合在没有方向时先找氛围,再回到设计里做微调。

Happy Hues

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

需看协议 以完整页面示例展示配色落地效果(背景、文字、按钮、强调色),适合把“好看的色卡”转换成“可用的 UI 体系”。

Paletton

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

需看协议 经典配色方案生成器,适合做互补/类比等配色推导,并可预览在示例界面中的对比效果。

Material Design Color Tool

工具地址:https://m3.material.io/styles/color/overview

需看协议 Material 3 的色彩体系与设计原则说明,适合需要构建一套“可扩展的颜色系统”(基础色、语义色、层级色)时做参考。

Accessible Colors

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

免费商用 输入前景/背景颜色即可检测 WCAG 对比度,并给出可读性评级,适合做按钮文字、正文排版与图表配色校验。

WebAIM Contrast Checker

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

免费商用 经典的对比度检测工具,给出 AA/AAA 结果与建议,适合在交付前做一轮快速“可访问性体检”。

APCA Contrast Calculator

工具地址:https://www.myndex.com/APCA/

需看协议 更贴近现代屏幕阅读体验的 APCA 对比度计算参考,用于对“浅色文字+深色背景”等场景做更细致的判断。

Colorable

工具地址:https://colorable.jxnblk.com/

免费商用 在两种颜色间拖动调整,直观看到对比度变化,适合在品牌色/主题色不想大改的前提下找“刚好合格”的组合。

Coblis 色盲模拟(Color Blindness Simulator)

工具地址:https://www.color-blindness.com/coblis-color-blindness-simulator/

需看协议 上传图片并模拟不同色觉类型的显示效果,适合检查图表、状态色与提示信息是否在色盲场景下仍可区分。

Color Oracle

工具地址:https://colororacle.org/

免费商用 桌面端色盲模拟工具,可对整个屏幕进行模拟预览,适合做界面评审时快速验证信息层级与状态色。

Image Color Picker(ImageColorPicker.com)

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

需看协议 上传图片取色并输出 HEX/RGB/HSL,适合从摄影、插画或竞品界面中快速提取一组可复用的主题色。

CSS Gradient

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

需看协议 可视化生成线性/径向渐变并输出 CSS 代码,适合做背景氛围、按钮高光或图形点缀的快速探索。

uiGradients

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

需看协议 渐变配色灵感库,适合在不改变主色体系的情况下,为 banner、卡片或插画增加更有层次的背景方案。

OpenColor

工具地址:https://yeun.github.io/open-color/

免费商用 一套经过整理的颜色调色板(多阶明度),适合在设计系统里快速选取一致的层级色并减少“凭感觉挑灰”。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

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

操作成功