配色与设计
调色板、对比度检查器、渐变、图标与 UI 资源。
6 款工具3 款免费
使用须知
颜色、对比度和字体是让界面「像设计过的」而不是「拼出来的」关键。这些工具帮你做决定并检查决定。
- 给出底层色值，方便在代码里复现
- 检查对比度，而不只是给漂亮的组合
- 用能扛住实际尺寸的格式交付资源
全部 6 款工具
Canva部分免费
零设计基础也能出图的模板神器
配色与设计Color Hunt免费
人工筛选的配色方案画廊
配色与设计Coolors部分免费
最快的配色方案生成器
配色与设计Figma部分免费
协作界面设计的行业标准
配色与设计Inkscape开源
免费开源的矢量图编辑器
配色与设计WebAIM Contrast Checker免费
文字对比度是否达标的权威检查
配色与设计快速对比
| 工具 | 价格 | 平台 | 适合 |
|---|---|---|---|
| Canva | 部分免费 | Web / Windows / macOS / 移动端 | 快速做出体面的海报、封面和 PPT |
| Color Hunt | 免费 | Web | 不想自己调色，直接挑一套现成的 |
| Coolors | 部分免费 | Web / iOS / Android | 起项目前快速定一套主色辅色 |
| Figma | 部分免费 | Web / 桌面 / 移动端 | UI 设计、设计系统和产品原型 |
| Inkscape | 开源 | Windows / macOS / Linux | 不想付 Illustrator 订阅费的矢量设计工作 |
| WebAIM Contrast Checker | 免费 | Web | 上线前确认无障碍配色合规 |
本分类的标签
常见问题
配色与设计 有多少款工具？
本分类收录 6 款工具，每款都链到官网。
配色与设计 的工具免费吗？
这里 3 款工具中有 6 款免费；其余提供免费或付费档，已在各卡片注明。
配色与设计 的工具是怎么挑选的？
每款工具都必须能在官网直接使用、持续维护，并且与同类有差异化。所有描述均由我们亲自撰写，卡片定期复核。