Material Palette

Material Palette 是一个基于 Material Design 配色规范的在线工具,挑两种颜色放进调色板,页面立刻把主色、辅色、文字色和背景色的搭配效果摆出来,方便在动手之前先看一眼整体的感觉。

Material Palette 能帮你做什么

• 配两色:从调色板里挑两个颜色,一键生成整套搭配。

• 看预览:主色辅色铺在示例界面上,效果一眼可见。

• 对深浅:同一色系的不同明度摆在旁边,方便挑层级。

• 存方案:满意的组合能下载色板,或者记下色值备用。

• 统一风格:按同一套规范选色,多人协作时不容易跑偏。

谁用 Material Palette 更省事

做 App 和后台界面的设计师最常来,给项目定主色时先在这儿跑一遍;自己做小产品、写前端的人,拿它快速找一组看着协调的配色;做视觉规范文档的人,也常借它把一版配色讲清楚。

跟 优设配色导航、BrandColors 比,它不一样在哪

• 和 优设配色导航 比:优设那边是配色灵感与教程的聚合,它这边是自己动手生成。

• 和 BrandColors 比:BrandColors 收的是各大品牌的官方色,它按 Material 规范现配。

• 共同点:都为了让人挑颜色时少纠结,尽快把方案定下来。

Material Palette 怎么开始用

• 入口:打开 materialpalette.com,免注册直接用。

• 第一步:在色板上点两个颜色,下方马上出整套预览。

• 取用:把色值抄进设计稿,或者下载生成的色板图片。

常见问题

Q1.Material Palette 免费吗?
A:免费,打开网页就能配色和预览,不用付费。站点靠合作方链接维持,使用本身没有门槛,想多配几版刷新重来即可。

Q2.只能配两种颜色吗?
A:主色确实就选两个,工具会据此补齐深浅和辅助色。如果项目需要更多颜色,再选一次、拼起来用就好。

Q3.生成的配色能商用吗?
A:颜色搭配本身不受限制,做产品、做设计都行。挑色这一步交给它,后面的版权问题自行把握即可。

Q4.能把配色导出成代码吗?
A:可以直接下载色板的图片,色值也能手动复制。想接进代码里,把对应色值填进主题文件即可,需要别的格式也能把色值整理成表格。

Q5.不懂 Material Design 也能用吗?
A:完全可以,你只管挑两个顺眼的颜色。照着挑出来的配色,基本不会出大错,多看几次示例自然就摸出规律。