Material Design Material Design
Material Design
Material Design
选择颜色家族
选择一个像红、蓝或青绿这样的颜色家族。
浏览色调
查看从50（最浅）到900（最深）的所有色调，以及强调变体。
复制颜色
单击即可复制任何色调的HEX代码。
What Is Material Design ?
Material Design Colors 是 Google 的 Material Design 颜色系统的完整参考，包含 19 个颜色家族，每个家族都有从 50 到 900 的渐变色，以及强调变体（A100-A700）。Material Design 调色板由 Google 精心设计，以提供一个平衡、全面的用户界面设计颜色集。每个颜色家族都提供了从非常浅（50）到非常深（900）的范围，强调渐变色为需要突出显示的元素提供了鲜艳、饱和的变体。该调色板在设计时考虑到了无障碍性，相邻阴影之间具有明显的对比度。在 Android 应用开发、Material UI（React）、Angular Material、Flutter 和遵循 Material Design 指南的 Web 应用中得到广泛使用。本工具允许您按家族浏览、查看所有渐变色的视觉条带，并复制任何颜色的 HEX 代码。
Why Use Material Design ?
-
完整的Material Design调色板，包含所有19个家族
-
从50到900的色调，以及强调变体（A100-A700）
-
具有快速导航功能的视觉颜色家族选择器
-
显示所有变体一览的色带条
-
每种颜色的单击复制
Common Use Cases
Android开发
根据Google的设计指南为Android应用程序选择Material Design颜色。
Material UI（React）
找到MUI主题自定义的确切颜色值。
Flutter开发
为Flutter应用程序选择Material Design颜色，具有信心。
网页设计
使用官方调色板构建受Material Design启发的网站。
Technical Guide
Material Design 颜色系统使用结构化命名约定：家族名称 + 阴影编号。每个家族都有 10 个标准阴影（50、100、200...900）和最多 4 个强调阴影（A100、A200、A400、A700）。标准阴影从非常浅（50，适合背景）到非常深（900，适合文本）。强调阴影是为浮动操作按钮、交互元素和强调而设计的高饱和度变体。并非所有家族都有强调变体 -- Brown、Grey 和 Blue Grey 缺乏强调变体，因为它们是中性的。在 Material Design 3（Material You）中使用 HCT（色相、色度、色调）颜色空间设计了这些颜色，该颜色空间提供的感知上更为均匀的颜色渐变比 HSL 更好。该调色板确保 500 阴影和白色文本之间以及较浅阴影和深色文本之间符合 WCAG AA 对比度标准。
Tips & Best Practices
-
1500号色调是每个家族的"主色"-将其用作基础
-
250-200号色调适合背景和表面
-
3600-900号色调适合浅色背景上的文本
-
4强调色调（A100-A700）用于强调元素，如FABs和链接
-
5Material Design 3引入了从用户壁纸中动态生成的颜色-请查看Material You以获取更新
Related Tools
Frequently Asked Questions
Q 这是最新的Material Design调色板吗？
Q 为什么棕、灰和蓝灰没有强调色调？
Q 我应该为主按钮使用哪种色调？
About This Tool
Material Design is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.