Material Design 是 Google 在设计界非常知名的设计语言。它提供了丰富的设计元素，例如按钮、卡片、表格等等，以及鲜明的色彩搭配，给人一种清新简洁的感觉。因此，掌握 Material Design 色彩搭配对于前端设计人员来说尤其重要。在这篇文章中，我们将一起详细了解 Material Design 的色彩名单。
Material Design 色彩规范
在 Material Design 中，Google 官方提供了两个主题色：primary color 和 accent color。Primary color 是应用程序中最广泛使用的颜色，而 accent color 则是在特殊情况下使用的颜色。此外，Material Design 还提供了一些基础颜色，如黑色、白色、灰色等等。以下是 Material Design 色彩规范的完整列表：
Primary Colors
- Red：#F44336
- Pink：#E91E63
- Purple：#9C27B0
- Deep Purple：#673AB7
- Indigo：#3F51B5
- Blue：#2196F3
- Light Blue：#03A9F4
- Cyan：#00BCD4
- Teal：#009688
- Green：#4CAF50
- Light Green：#8BC34A
- Lime：#CDDC39
- Yellow：#FFEB3B
- Amber：#FFC107
- Orange：#FF9800
- Deep Orange：#FF5722
Accent Colors
- Red accent：#FF5252
- Pink accent：#FF4081
- Purple accent：#EA80FC
- Deep purple accent：#7C4DFF
- Indigo accent：#536DFE
- Blue accent：#448AFF
- Light blue accent：#40C4FF
- Cyan accent：#18FFFF
- Teal accent：#64FFDA
- Green accent：#69F0AE
- Light green accent：#B2FF59
- Lime accent：#EEFF41
- Yellow accent：#FFFF00
- Amber accent：#FFD740
- Orange accent：#FFAB40
- Deep orange accent：#FF6E40
Basic Colors
- Black：#000000
- White：#FFFFFF
- Transparent：#00000000
- Full black：#FF000000
- Full white：#FFFFFFFF
- Grey：#9E9E9E
- Blue-grey：#607D8B
如何使用 Material Design 色彩
在实际开发中，我们可以使用以下三种方式来调用 Material Design 中的颜色：
- 在代码中直接使用对应的颜色代码，例如
background-color: #F44336; - 在 HTML 标签上使用
class属性，调用相应的类，例如下方示例代码中的md-blue；
<button class="md-blue">Blue Button</button>
- 在 CSS 文件中定义各种颜色，例如下方示例代码中的
:root以及--md-blue；
:root {
--md-blue: #2196F3;
}
.md-blue {
background-color: var(--md-blue);
}Material Design 色彩搭配指南
在 Material Design 中，色彩搭配能够为应用程序带来统一性和美感。下面是一些常用的色彩搭配方案：
Monochromatic（单色调）：使用相同的颜色但不同深度/明度来创建整个应用程序。例如，使用深蓝色作为主题色，而浅蓝色则用于背景和边框。
Analogous（相邻类色）：使用相邻的颜色建立一个和谐的配色方案。这意味着使用相邻的颜色，但每个颜色之间有一定的不同。例如，使用紫色和深紫色作为主题色，而苍白色和浅蓝色则可用于强调部分。
Complementary（互补色）：使用互补的颜色建立一个非常高的对比度色彩方案。例如，使用深灰色作为主题色，而淡黄绿色可用于突出。
Triadic（三色方案）：选择三个颜色，其中一种是主题色，另外两种则是用于强调和支配的颜色。例如，使用深兰色作为主题色，而淡黄色和浅紫色则用于强调按钮和图标。
示例代码
下面是一个简单的 Material Design 风格的按钮样式的示例代码，其中主题色为深蓝色/Blue：
-- -------------------- ---- -------
-------
----- -
---------- --------
-
-------- -
----------------- ---------------
------- -----
-------------- ----
------ ------
-------- ---- -----
----------- -------
---------------- -----
-------- -------------
---------- -----
------- --- ----
------- --------
-
-------------- -
-------- ----
-
--------
------- -------------------- ---------------总结
在本文中，我们详细介绍了 Material Design 的色彩规范，以及如何在实际开发中使用和调用这些颜色。我们还提供了一些常用的色彩搭配指南和示例代码，希望能够帮助前端设计人员更好地掌握和应用 Material Design 的色彩搭配技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64952f7f48841e989427254e