如何快速生成 Material Design 配色？Material Palette 双色调色板来帮你

? 先搞懂：Material Design 配色为啥这么重要？

做设计的朋友都知道，Material Design 不是随便画画就行，它的配色有一套严格的逻辑。谷歌在这套设计语言里，把颜色分成了主色（Primary Color）、辅助色（Accent Color）和中性色（Neutral Color），每个颜色都有明确的角色。主色是品牌的核心，比如 APP 的标题栏、按钮主要用它；辅助色用来强调关键操作，像确认按钮、输入框焦点；中性色则负责文字、背景，保证内容清晰可读。

要是配色乱来，用户一眼就觉得 “不专业”。比如主色和辅助色对比度太低，按钮混在背景里看不清；或者颜色太多太杂，用户找不到重点。之前见过一个 APP，主色用了浅灰，辅助色用了浅蓝，结果在白色背景上，按钮几乎看不见，用户反馈差到不行。

但手动配出符合规范的颜色，对新手来说真的难。既要考虑色相、饱和度、明度的搭配，还要符合 Material Design 的色调标准（比如主色通常有 50 到 900 共 10 个明度等级），光靠肉眼调，没半天出不来结果。这时候，一个靠谱的工具就太重要了 ——Material Palette 就是专门干这个的，尤其是它的双色调色板，简直是救急神器。

? Material Palette 到底是个啥？

简单说，Material Palette 是一个免费的在线工具，专门帮设计师和开发者快速生成符合 Material Design 规范的配色方案。它不是谷歌官方的，但胜在够专业，完全按照 Material Design 的色彩规则来，生成的颜色不管是安卓、iOS 还是网页端，用起来都没问题。

它最牛的地方就是 “双色调色板” 功能。你不用自己瞎琢磨主色和辅助色怎么搭，选两个基础色，工具自动帮你生成全套的色调（包括各种明度的变体），还能实时看到这两个颜色在按钮、卡片、文字上的实际效果。这比自己在 PS 里一个个调，效率高太多了。

我第一次用的时候就惊了，以前配一套合格的 Material 配色，至少得查规范文档，算对比度，调十几个色值，现在用它，5 分钟搞定。而且它支持中文显示，界面也不复杂，哪怕是刚入门的设计小白，看一眼就知道怎么操作。

? 手把手教你：用 Material Palette 生成双色调色板

第一步，打开 Material Palette 的官网（网址是 materialpalette.com，别记错了，免得进错山寨站）。首页特别干净，中间就是两个大色块，左边标着 “Primary”（主色），右边是 “Accent”（辅助色），这就是双色调的核心区域。

第二步，选主色。点左边的主色色块，会弹出一个色轮，里面都是 Material Design 推荐的基础色相，红、蓝、绿、黄这些都有。你可以直接点选一个基础色，比如选了蓝色，下面会自动出现这个色相的不同明度（从 50 到 900），默认会选中 500 这个中间明度，你也可以上下滑动调，比如想要深一点的主色，就选 700。

第三步，选辅助色。右边的辅助色块操作和主色一样，点进去选一个色相。这里有个小技巧：辅助色最好和主色有对比，比如主色是冷色调（蓝、绿），辅助色可以选暖色调（橙、红），这样搭配出来更有层次感。当然，你也可以选邻近色，比如主色是浅蓝，辅助色选深蓝，适合低调的设计。

选完两个颜色，页面会自动刷新，下面会出现实时预览区。这里能看到配色在实际 UI 元素中的效果：顶部导航栏（主色）、按钮（主色和辅助色）、卡片（主色的浅变体）、文字（中性色搭配主色）。甚至连输入框、开关这些小控件的颜色都给你展示出来了，特别直观。

要是觉得某个颜色差点意思，不用重新选，直接在预览区上方的色条里微调。每个颜色后面都有对应的色值（HEX、RGB、HSL），鼠标放上去就能复制，方便直接用在设计软件里。

最后一步，导出配色方案。页面右上角有个 “EXPORT” 按钮，点进去能选导出格式：CSS 代码（适合网页）、Android XML（安卓开发）、Swift 代码（iOS 开发）、Sketch/Figma 色板文件。甚至还能下载一张包含所有色值的图片，发给团队成员同步用，特别贴心。

? 为啥说 Material Palette 双色调色板是 “懒人福音”？

最直接的好处就是省时间。以前我帮朋友做一个小 APP 的 UI，光配色就花了 3 小时，查规范、调明度、测对比度，结果还差点意思。用 Material Palette 之后，选两个基础色，10 分钟搞定全套，导出的代码直接能用，开发那边也不用再换算色值了。

它能保证配色符合 Material Design 规范。很多人手动配色容易踩坑，比如主色的明度等级不对，导致在不同控件上显示模糊。Material Palette 生成的每个颜色，明度、饱和度都是按谷歌的标准来的，不用担心不符合规范，上架应用商店的时候也少了一个审核风险。

双色调搭配更和谐不翻车。新手最容易犯的错就是颜色搭得太乱，要么对比太强刺眼，要么太弱没层次。这个工具的双色调色板会自动计算两个颜色的和谐度，哪怕你随便选，出来的效果也不会太差。我试过主色选紫色，辅助色选黄色（互补色），预览的时候居然很协调，比我自己瞎配强多了。

还有个隐藏优势：多平台适配。导出的代码不光有网页用的 CSS，还有移动端的原生代码。比如安卓开发，直接把 XML 文件导进项目，按钮、标题栏的颜色就能直接用，不用再手动写色值，减少了开发时的失误。

? 实际用起来：这些场景用它准没错

做 APP 原型的时候，用它最快。不管是 Axure 还是 Figma，先在 Material Palette 里生成配色，导出色板文件导进去，原型的视觉风格立刻就统一了，客户看的时候也更有代入感。之前帮一个电商客户做原型，用它配了橙色（主色，显活力）和蓝色（辅助色，显信任），客户当场就说 “这个颜色感觉对了”。

网站改版时也能用上。很多企业官网想改成 Material 风格，但设计师没经验。用这个工具生成主色（品牌色）和辅助色（强调色），然后把导出的 CSS 代码给前端，导航栏、按钮、Banner 的颜色直接套用，效率高不说，还能保证整个网站的颜色统一。

甚至做 PPT、海报的时候也能借鉴。虽然不是 UI 设计，但 Material Design 的配色本身就很现代、简洁。我试过用它生成的配色做产品介绍 PPT，主色做标题背景，辅助色标重点，同事都说 “比以前的花花绿绿看着舒服多了”。

⚠️ 用的时候这些坑得避开

别完全依赖工具，一定要结合实际场景微调。比如生成的主色在手机上看着刚好，但打印出来可能偏暗，这时候就得根据实际媒介稍微调一下明度。之前有个案例，生成的辅助色在电脑屏幕上很鲜艳，但在低色域的安卓机上显示发灰，最后手动加了点饱和度才解决。

注意无障碍设计。Material Design 对颜色对比度有要求，比如文字和背景的对比度至少要 4.5:1（正常文字）。Material Palette 虽然会自动优化，但最好还是用对比度检测工具（比如 WebAIM 的 Contrast Checker）再测一下，免得视障用户看不清内容。

别忽略品牌色的融入。如果你的产品有固定品牌色，比如可口可乐的红，最好把品牌色设为主色，然后用工具选辅助色搭配，而不是完全按工具的默认色来。这样既符合规范，又能突出品牌识别度。

? 有没有替代工具？对比下来还是它最顺手

当然有其他工具，比如谷歌官方的 Material Design Color Tool（material.io/resources/color），功能更全，还能测对比度、看无障碍效果。但它的操作稍微复杂点，新手可能要花时间学。而且它的双色调搭配没有 Material Palette 直观，预览区也没那么丰富。

还有个叫 Coolors 的工具，配色功能很强，但它不是专门针对 Material Design 的，生成的颜色可能不符合规范，需要自己再调整，对新手不太友好。

对比下来，Material Palette 胜在简单、专注、够用。如果你就是想要快速生成符合 Material 规范的双色调色板，它绝对是首选，不用花时间学复杂功能，打开就能用。