? Material Palette 全面使用指南：从主色输入到 Google 规范配色生成
? 工具核心功能与适用场景
Material Palette 是专为前端开发者和设计师打造的配色神器，最大亮点是能一键生成符合 Google Material Design 规范的配色方案。不管是搭建官网、移动端应用还是小程序，它都能根据你输入的主色，自动衍生出完整的辅助色、中性色体系，省去手动调试色值的麻烦。很多资深前端都把它当必备工具，像字节跳动的设计师团队就常用来快速对齐品牌色，美团前端在重构官网时也用它确保配色符合无障碍标准。
? 基础使用三步法：从打开到导出
第一步：进入工具主界面
直接在浏览器输入
直接在浏览器输入
materialpalette.com 就能打开，界面特别简洁，中间大大的颜色选择框很显眼。要是你知道品牌主色的 hex 代码，比如 #3f51b5（蓝色），可以直接在输入框里粘贴；要是没头绪，也能用颜色选择器滑动选色，鼠标悬停在色轮上会显示具体色值，这点对新手很友好。第二步：生成完整配色方案
输入主色后，页面会瞬间分成左右两部分。左边是你选的主色区域，右边自动生成辅助色和中性色。这里有个小技巧：点击主色区域右上角的「调整亮度」滑块，能快速让主色变亮或变暗，比如做移动端 APP 时，主色可能需要比官网稍微暗一点，提升夜间模式的舒适度。辅助色部分会根据主色智能搭配，像蓝色主色通常会配橙色或绿色的辅助色，这些都是 Google 规范里推荐的互补色组合。
输入主色后，页面会瞬间分成左右两部分。左边是你选的主色区域，右边自动生成辅助色和中性色。这里有个小技巧：点击主色区域右上角的「调整亮度」滑块，能快速让主色变亮或变暗，比如做移动端 APP 时，主色可能需要比官网稍微暗一点，提升夜间模式的舒适度。辅助色部分会根据主色智能搭配，像蓝色主色通常会配橙色或绿色的辅助色，这些都是 Google 规范里推荐的互补色组合。
第三步：导出与应用配置
生成配色后别急着走，页面下方有多种导出方式。最常用的是「代码片段」选项，点击后能看到 CSS 变量的形式，比如
生成配色后别急着走，页面下方有多种导出方式。最常用的是「代码片段」选项，点击后能看到 CSS 变量的形式，比如
--primary-color: #3f51b5;，直接复制到项目的样式文件里就行。要是用 React 或 Vue 框架，还能切换到「JSON 配置」模式，导出的 JSON 文件可以直接用插件导入，像 VS Code 的「Material Theme」插件就能识别这种格式，一键应用到项目中。? 高级功能挖掘：让配色更贴合需求
自定义辅助色强度
很多人不知道，在辅助色区域点击色块，会弹出一个调节面板。比如主色选了红色，想让按钮的悬停色更柔和，就可以把辅助色的「饱和度」调低 10%，「亮度」调高 5%，这样既能保持品牌调性，又不会让用户觉得刺眼。B 站的移动端 APP 在改版时，就用这个功能把红色主色的辅助色调得更温和，降低了用户长时间浏览的视觉疲劳。
很多人不知道，在辅助色区域点击色块，会弹出一个调节面板。比如主色选了红色，想让按钮的悬停色更柔和，就可以把辅助色的「饱和度」调低 10%，「亮度」调高 5%，这样既能保持品牌调性，又不会让用户觉得刺眼。B 站的移动端 APP 在改版时，就用这个功能把红色主色的辅助色调得更温和，降低了用户长时间浏览的视觉疲劳。
中性色体系微调
Material Palette 生成的中性色（白、灰、黑）其实是一套完整的层级系统。比如背景色用 #f5f5f5，文本色用 #333333，边框用 #e0e0e0。但有时候项目需要更细致的区分，像表格的隔行变色，就可以点击中性色区域的「编辑」按钮，在弹出的色板里微调每个色阶，比如把浅灰色从 #f5f5f5 改成 #f9f9f9，让层次感更明显。知乎的后台管理系统就用这种方法优化了表格的可读性。
Material Palette 生成的中性色（白、灰、黑）其实是一套完整的层级系统。比如背景色用 #f5f5f5，文本色用 #333333，边框用 #e0e0e0。但有时候项目需要更细致的区分，像表格的隔行变色，就可以点击中性色区域的「编辑」按钮，在弹出的色板里微调每个色阶，比如把浅灰色从 #f5f5f5 改成 #f9f9f9，让层次感更明显。知乎的后台管理系统就用这种方法优化了表格的可读性。
无障碍对比度检测
点击页面右上角的「对比度检查」图标，工具会自动检测主色与文本色的对比度是否符合 WCAG 标准。比如主色用蓝色 #3f51b5，文本色默认是白色 #ffffff，对比度达到 7.5:1，远超 AA 级标准的 4.5:1。但如果主色选了浅粉色，可能需要把文本色换成深灰色，这时候工具会提示你调整，避免出现颜色对比度不足的 accessibility 问题，这点对企业级项目特别重要，像银行类 APP 就必须通过这类检测。
点击页面右上角的「对比度检查」图标，工具会自动检测主色与文本色的对比度是否符合 WCAG 标准。比如主色用蓝色 #3f51b5，文本色默认是白色 #ffffff，对比度达到 7.5:1，远超 AA 级标准的 4.5:1。但如果主色选了浅粉色，可能需要把文本色换成深灰色，这时候工具会提示你调整，避免出现颜色对比度不足的 accessibility 问题，这点对企业级项目特别重要，像银行类 APP 就必须通过这类检测。
? 前端项目实战应用案例
案例一：官网首页配色搭建
假设要做一个科技公司官网，主色选深绿色 #2e7d32（代表环保与科技感）。用 Material Palette 生成后，辅助色选亮黄色 #ffd54f 作为 CTA 按钮色，中性色用浅灰 #f5f5f5 做背景，深灰 #424242 做文本。实际应用时，在 HTML 的
假设要做一个科技公司官网，主色选深绿色 #2e7d32（代表环保与科技感）。用 Material Palette 生成后，辅助色选亮黄色 #ffd54f 作为 CTA 按钮色，中性色用浅灰 #f5f5f5 做背景，深灰 #424242 做文本。实际应用时，在 HTML 的