Google Material Design 是一种现代化的 UI 设计语言，其颜色规范是其中的一个非常重要的组成部分。在这篇文章中，我们将深入探讨 Material Design 的颜色规范，包括色板、调色板、色彩建议以及如何在前端应用中使用这些颜色。
色板
Material Design 的色板是基本颜色的集合，被分为两个主要部分：主色和辅助色。主色是应用中最重要的颜色，用来表现应用的整体风格和品牌。辅助色则用于增强主色的视觉效果。
主色
主色是应用的核心颜色，应该在应用的各个部分中得到广泛的应用。Material Design 规定了一组主色，包括红、粉、紫、深紫、靛蓝、蓝、浅蓝、青绿、绿、浅绿、黄、橙和深橙。这些颜色的 RGB 值如下：
| 颜色名称 | RGB 值 |
|---|---|
| 红 | #f44336 |
| 粉 | #e91e63 |
| 紫 | #9c27b0 |
| 深紫 | #673ab7 |
| 靛蓝 | #3f51b5 |
| 蓝 | #2196f3 |
| 浅蓝 | #03a9f4 |
| 青绿 | #00bcd4 |
| 绿 | #4caf50 |
| 浅绿 | #8bc34a |
| 黄 | #ffeb3b |
| 橙 | #ff9800 |
| 深橙 | #ff5722 |
辅助色
辅助色是用来增强主色的颜色，可以用于强调、高亮或者其他的视觉效果。Material Design 规定了一组辅助色，包括红、粉、紫、深紫、靛蓝、蓝、浅蓝、青绿、绿、浅绿、黄、橙和深橙。这些颜色的 RGB 值如下：
| 颜色名称 | RGB 值 |
|---|---|
| 红 | #ff8a80 |
| 粉 | #ff80ab |
| 紫 | #ea80fc |
| 深紫 | #b388ff |
| 靛蓝 | #8c9eff |
| 蓝 | #82b1ff |
| 浅蓝 | #80d8ff |
| 青绿 | #84ffff |
| 绿 | #b9f6ca |
| 浅绿 | #ccff90 |
| 黄 | #ffff8d |
| 橙 | #ffd180 |
| 深橙 | #ff9e80 |
调色板
Material Design 还规定了一组调色板，用于在主色和辅助色之间进行渐变。这些颜色被称为“调色板”，包括红、粉、紫、深紫、靛蓝、蓝、浅蓝、青绿、绿、浅绿、黄、橙和深橙，以及一组灰色。这些颜色的 RGB 值如下：
| 颜色名称 | RGB 值 |
|---|---|
| 红 | #ffebee, #ffcdd2, #ef9a9a, #e57373, #ef5350, #f44336, #e53935, #d32f2f, #c62828, #b71c1c |
| 粉 | #fce4ec, #f8bbd0, #f48fb1, #f06292, #ec407a, #e91e63, #d81b60, #c2185b, #ad1457, #880e4f |
| 紫 | #f3e5f5, #e1bee7, #ce93d8, #ba68c8, #ab47bc, #9c27b0, #8e24aa, #7b1fa2, #6a1b9a, #4a148c |
| 深紫 | #ede7f6, #d1c4e9, #b39ddb, #9575cd, #7e57c2, #673ab7, #5e35b1, #512da8, #4527a0, #311b92 |
| 靛蓝 | #e1f5fe, #b3e5fc, #81d4fa, #4fc3f7, #29b6f6, #03a9f4, #039be5, #0288d1, #0277bd, #01579b |
| 蓝 | #e3f2fd, #bbdefb, #90caf9, #64b5f6, #42a5f5, #2196f3, #1e88e5, #1976d2, #1565c0, #0d47a1 |
| 浅蓝 | #e1f5fe, #b3e5fc, #81d4fa, #4fc3f7, #29b6f6, #03a9f4, #039be5, #0288d1, #0277bd, #01579b |
| 青绿 | #e0f7fa, #b2ebf2, #80deea, #4dd0e1, #26c6da, #00bcd4, #00acc1, #0097a7, #00838f, #006064 |
| 绿 | #e8f5e9, #c8e6c9, #a5d6a7, #81c784, #66bb6a, #4caf50, #43a047, #388e3c, #2e7d32, #1b5e20 |
| 浅绿 | #f1f8e9, #dcedc8, #c5e1a5, #aed581, #9ccc65, #8bc34a, #7cb342, #689f38, #558b2f, #33691e |
| 黄 | #fffde7, #fff9c4, #fff59d, #fff176, #ffee58, #ffeb3b, #fdd835, #fbc02d, #f9a825, #f57f17 |
| 橙 | #fff3e0, #ffe0b2, #ffcc80, #ffb74d, #ffa726, #ff9800, #fb8c00, #f57c00, #ef6c00, #e65100 |
| 深橙 | #fbe9e7, #ffccbc, #ffab91, #ff8a65, #ff7043, #ff5722, #f4511e, #e64a19, #d84315, #bf360c |
| 灰色 | #fafafa, #f5f5f5, #eeeeee, #e0e0e0, #bdbdbd, #9e9e9e, #757575, #616161, #424242, #212121 |
色彩建议
除了色板和调色板之外，Material Design 还提供了一些色彩建议，以帮助设计师和开发人员更好地运用这些颜色。
建议 1：使用主色
主色应该是应用中最重要的颜色，应该在应用的各个部分中得到广泛的应用。使用主色可以帮助用户更快地认识应用的品牌和风格。
建议 2：使用辅助色
辅助色可以用于增强主色的视觉效果，例如强调、高亮或者其他的视觉效果。使用辅助色可以帮助用户更好地理解应用的内容和功能。
建议 3：使用调色板
调色板可以用于在主色和辅助色之间进行渐变，从而创建更多样化的颜色效果。使用调色板可以让应用的颜色更加丰富和多样化。
建议 4：使用对比色
对比色是用来增强文本和图像的可读性和可视性的颜色。在 Material Design 中，对比色通常是黑色或白色。使用对比色可以让应用的文本和图像更加清晰和易于理解。
在前端应用中使用颜色
在前端应用中使用 Material Design 的颜色非常简单。可以使用 CSS 来定义颜色，例如：
-- -------------------- ---- ------- -- -------- -- ---- - ----------------- -------- - -- -------- -- - - ------ -------- - -- ---------- -- ------ - ----------- ------------------ ------ -------- --------- -
除了使用 CSS 之外，还可以使用 JavaScript 来动态地设置颜色，例如：
-- -------------------- ---- ------- -- -------- ----------------------------------- - ---------- -- -------- -------------------------------------------------- - ------------- - ---------- --- -- ---------- ------------------------------------------------------------ - ----------------------- - ------------------- ------ -------- ---------- ---
结论
Material Design 的颜色规范是一种非常有用的设计工具，可以帮助设计师和开发人员创建更加现代化和美观的应用。在本文中，我们详细讨论了 Material Design 的色板、调色板、色彩建议以及如何在前端应用中使用这些颜色。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6753a1988bd460d3ada671c7