无需登录 数据私有 本地保存

Material Design色板 - Google官方调色板

前端设计 参考工具 Material 色板 颜色
94
0
0
0
Material Design 色板 19个色系 · 266种颜色
全部色系 🔴 红色系 🟣 紫色系 🔵 蓝色系 🟢 绿色系 🟡 黄橙色系 ⚫ 中性色系
常见问题

Material Design 色板是 Google 在 2014 年推出的官方色彩规范体系，包含 19 个主色系列，每个系列提供 10 个色阶（50-900）以及 4 个强调色阶（A100-A700），共计 266 种精心调校的颜色。这些颜色经过严格测试，确保在不同设备和屏幕上的显示一致性，广泛应用于 Android 应用、网页设计及品牌标识中。

色阶数字代表颜色的深浅程度：50 是最浅的色调（接近白色），适合用作背景；500 是基准主色，代表该色系的"标准色"；900 是最深的色调（接近黑色），适合文字或强对比元素。数字越大颜色越深，设计师可根据界面层级灵活选用不同色阶。

A 系列（Accent）是 Material Design 的强调色，包含 A100、A200、A400、A700 四个色阶。它们比标准色阶更鲜艳明亮，专门用于浮动操作按钮（FAB）、开关、滑块、进度条等需要吸引用户注意的交互元素。注意 Brown、Grey、Blue Grey 三个中性色系没有 A 系列。

推荐做法：选择 1 个色系作为主色（Primary）（通常用 500 色阶），搭配其 50-200 色阶做背景、700-900 色阶做深色变体；再选 1 个色系的 A 系列作为强调色（Accent）。可使用 CSS 变量或预处理器变量统一管理色值。点击本工具任意色块即可复制色值，直接粘贴到代码中使用。

是的，完全免费。Google 将 Material Design 色彩规范作为开源设计资源发布，遵循 Apache 2.0 许可证。您可以自由地在个人项目、商业应用、网页设计中使用这些颜色，无需授权或署名。色值本身不受版权保护。

Material Design 官方推荐同色系搭配（如 Blue 500 + Blue 200 + Blue 700）最为安全和谐；邻近色搭配（如 Blue + Cyan 或 Blue + Indigo）可增加层次感；互补色搭配（如 Blue + Orange）适合需要强烈对比的场景。建议主色占 60%、次要色占 30%、强调色占 10%。
🔧 相关工具