做设计或者开发的朋友，肯定都遇到过这种情况 —— 想搞一套符合 Google Material Design 规范的配色，自己调半天总觉得差点意思，要么对比度不够，要么辅助色和主色不搭。其实有个工具早就把这些问题解决了，就是 Material Palette。这玩意儿我用了快 5 年，从刚入行到现在，只要涉及 Material Design 的项目，基本离不开它。今天就掰开揉碎了讲讲，怎么用它拿到规范配色，还有代码导出的那些技巧。
? 先搞懂 Material Palette 到底是个啥？
说简单点，Material Palette 就是个基于 Google Material Design 规范的配色生成工具。你不用死记硬背那些复杂的配色规则，比如主色要占多大比例，辅助色怎么用才不突兀，它直接帮你把这些规范落地成可直接用的色值。
说简单点，Material Palette 就是个基于 Google Material Design 规范的配色生成工具。你不用死记硬背那些复杂的配色规则，比如主色要占多大比例，辅助色怎么用才不突兀，它直接帮你把这些规范落地成可直接用的色值。
官网很好记，就是materialpalette.com，打开不用注册登录，完全免费。不管你是 UI 设计师、前端开发者，还是 Android/iOS 工程师，都能在这找到自己能用的东西。设计师可以直接拿色值用在 Figma、Sketch 里，开发者能一键导出代码，省去手动写色值的麻烦。
最关键的是，它生成的配色方案百分百符合 Google 的官方规范。不会出现你自己调的颜色看着还行，但放到实际界面里要么看不清文字，要么和组件不搭的情况。这一点对于需要严格遵循设计规范的项目来说，太重要了。
? 第一步：打开网站，熟悉基础界面
第一次用别慌，界面简单到不行。打开materialpalette.com之后，整个页面就分三块 —— 顶部是颜色选择区，中间是预览区，底部是代码导出区。
第一次用别慌，界面简单到不行。打开materialpalette.com之后，整个页面就分三块 —— 顶部是颜色选择区，中间是预览区，底部是代码导出区。
顶部颜色选择区有两个大框，左边是 “Primary”（主色），右边是 “Accent”（辅助色）。每个框点进去都有个色板，里面是 Material Design 推荐的基础色，你也可以直接输入 HEX 或者 RGB 值自定义颜色。旁边还有个小开关，能切换 “Light” 和 “Dark” 模式，方便你同时看两种模式下的配色效果。
中间的预览区是重点，它会实时显示你选的颜色用在实际组件上的效果。比如卡片、按钮、输入框、文本标题这些，你能直接看到主色用在卡片背景上时，文本该用什么颜色才清晰；辅助色做成按钮时，点击状态会是什么样子。
底部的导出区就更直观了，列出了各种代码格式，像 CSS、Sass、Less，还有 Android 的 XML、iOS 的 Swift 代码，甚至连 Flutter 的代码都有。需要哪种点一下，代码就自动复制好了，直接能用。
? 第二步：选对主色和辅助色，贴合 Google 规范
选主色和辅助色不是瞎选的，得跟着 Google 的规范来。Material Design 里，主色是品牌的核心颜色，占界面的 60% 以上，比如导航栏、卡片背景这些大面积区域都用它。辅助色则用于强调，像按钮、选中状态、重要提示，占比大概 30%。剩下的 10% 是中性色，黑、白、灰这些。
选主色和辅助色不是瞎选的，得跟着 Google 的规范来。Material Design 里，主色是品牌的核心颜色，占界面的 60% 以上，比如导航栏、卡片背景这些大面积区域都用它。辅助色则用于强调，像按钮、选中状态、重要提示，占比大概 30%。剩下的 10% 是中性色，黑、白、灰这些。
选主色的时候，建议从品牌色里挑。比如你的品牌 logo 是蓝色，那就从色板里找最接近的蓝色作为主色。Material Palette 的色板里每个基础色都有深浅不同的色调，比如蓝色有 50 到 900 共 10 个明度，50 最浅，900 最深。一般主色选 500 这个明度比较合适，既不会太淡也不会太重。
辅助色要和主色形成对比，但不能冲突。比如主色是蓝色（冷色），辅助色可以选橙色、黄色（暖色），这样视觉上有张力。要是主色是红色，辅助色选绿色就很合适。不确定的话，选主色之后，辅助色的色板里会有几个 “Recommended”（推荐）的颜色，跟着选准没错。
这里有个小技巧，选完之后别急着下一步，点一下预览区的各个组件看看。比如主色用在导航栏时，标题文字是不是清晰？辅助色的按钮和主色背景放在一起，有没有一眼就能注意到？有问题随时调，直到看着舒服为止。
? 第三步：预览配色效果，避免踩坑
很多人选完颜色就直接导出代码了，这其实容易踩坑。预览区的作用不光是好看，更是帮你检查配色的实用性。
很多人选完颜色就直接导出代码了，这其实容易踩坑。预览区的作用不光是好看，更是帮你检查配色的实用性。
最常见的问题是文本和背景的对比度不够。Material Design 有明确规定，正常文本的对比度至少要达到 4.5:1，大标题可以降到 3:1。Material Palette 很贴心，要是对比度不够，预览区的文本会变得模糊，甚至会出现一个警告图标。这时候就得换个主色明度，比如主色太深，就换成浅一点的 50 或 100；太浅就换成 800 或 900。
还要看看不同状态下的效果。比如按钮，默认状态、 hover 状态、点击状态的颜色变化是不是自然。预览区里有个 “Button” 板块，点一下按钮就能看到各种状态，颜色过渡不生硬才合格。
另外，别忘了切换深色模式看看。有些颜色在浅色模式下没问题，到了深色模式就瞎了。比如主色选了浅灰，浅色模式下文本用深灰很清晰，深色模式下背景变成深黑，浅灰主色的卡片配上深灰文本，就很难看清。这时候要么换主色，要么在深色模式里单独调整文本色。
✨ 进阶玩法：自定义中性色和文本色
默认情况下，Material Palette 会根据你选的主色和辅助色，自动生成一套中性色（黑、白、灰）和文本色。但有时候这些默认值可能不符合你的需求，这时候就得手动调。
默认情况下，Material Palette 会根据你选的主色和辅助色，自动生成一套中性色（黑、白、灰）和文本色。但有时候这些默认值可能不符合你的需求，这时候就得手动调。
在预览区的右上角，有个 “Customize” 按钮，点进去能看到中性色的设置。中性色分 “Background”（背景）、“Surface”（表面，比如卡片、弹窗）、“On Background”（背景上的文本）、“On Surface”（表面上的文本）这几个。每个都能单独调颜色，调的时候实时看预览效果，确保文本和背景的对比度达标。
文本色也很关键。除了默认的 “Primary Text” 和 “Secondary Text”，有时候需要特殊文本，比如提示文字、错误提示。在自定义面板里，能手动添加文本色，直接输入色值就行，添加后预览区会自动显示效果。
举个例子，我之前做一个教育类 APP，需要一种 “提示文本” 的颜色，比次要文本再浅一点。就在自定义面板里加了个 #9E9E9E，预览区里马上就显示在输入框的提示文字上，看着合适就保留了，特别方便。
? 代码导出技巧：选对格式，直接用在项目里
导出代码是最爽的一步，不用自己手敲色值，还能避免写错。但格式选不对，用起来也麻烦，分享几个技巧。
导出代码是最爽的一步，不用自己手敲色值，还能避免写错。但格式选不对，用起来也麻烦，分享几个技巧。
如果是做网页前端，首选 “CSS Variables”（CSS 变量）。导出的代码会把所有颜色定义成 --primary、--accent 这样的变量，直接复制到你的 CSS 文件里，然后在样式里用 var (--primary) 调用就行。以后要改颜色，只改变量值，不用通篇找色值，效率高多了。
要是用 Sass 或 Less 预处理，就选对应的格式。导出的是变量或者混合器（mixin），比如 Sass 会生成 $primary: #2196F3; 这样的变量，直接导入到你的.scss 文件里就能用。
Android 开发者直接下 “Android XML”。导出的文件里，每个颜色都定义成#2196F3 ，放到项目的 res/values/colors.xml 里，布局文件里直接引用 @color/primary，完全符合 Android 的开发规范。
iOS 开发者看这里，选 “Swift” 格式。导出的是一个 struct，里面全是 UIColor 的扩展，比如 static let primary = UIColor (red: 0.13, green: 0.59, blue: 0.95, alpha: 1.0)，复制到项目里，用 UIColor.primary 就能调用，不用自己算 RGB 的比例。
还有个小细节，导出前最好勾选 “Include all shades”（包含所有明度）。比如主色选了 500，勾选后会导出 50 到 900 所有明度的色值，后续做渐变色或者不同状态的颜色变化时，直接用现成的，不用再调。
⚠️ 这些错误别犯！新手常踩的配色坑
用了这么久，见过不少人用 Material Palette 踩坑，总结几个最常见的，避开能省很多事。
用了这么久，见过不少人用 Material Palette 踩坑，总结几个最常见的，避开能省很多事。
别只看单个颜色好看，忽略整体搭配。有次看到同事选了个亮紫色做主色，粉色做辅助色，单看都挺亮，但放一起预览，整个界面像打翻了调色盘，特别乱。选色时一定要看预览区的整体效果，主色和辅助色得有主次之分。
导出代码后不测试就用。虽然工具很准，但偶尔会因为浏览器或者 IDE 的问题，出现色值显示偏差。导出后最好在项目里跑一下，看看实际显示的颜色和预览区是不是一致，不一致就检查代码有没有复制错。
忘了考虑深色模式。现在很多 APP 和网站都要求支持深色模式，选色时一定要切换到 Dark 模式预览。我之前就吃过亏，浅色模式配色没问题，深色模式下主色和背景色太接近，上线后用户反馈看不清，只能返工改。
自定义颜色时瞎调。有些人觉得默认色不够个性，就随便输个色值。但 Material Design 的颜色体系是经过大量测试的，随便改容易出现对比度不够、和组件不兼容的问题。真想自定义，就在推荐色的基础上微调，比如主色 500 太深，就换成 400，别跳太远。
其实用 Material Palette 真的没什么难度，跟着步骤来，选好色多看预览，导出代码时选对格式，基本不会出问题。比起自己瞎琢磨配色，节省的时间可不止一点点。而且生成的配色完全符合 Google 规范，不管是给客户看，还是开发落地，都能少很多麻烦。
最后再啰嗦一句，工具再好也得结合实际需求。它是个辅助，不是标准答案，根据项目特点微调一下，效果会更好。试试吧，保证你用一次就离不开。
【该文章由dudu123.com嘟嘟 ai 导航整理，嘟嘟 AI 导航汇集全网优质网址资源和最新优质 AI 工具】
