Material Design 是 Google 推出的一种设计语言，它强调简洁、直观且统一的用户体验。在 Material Design 中，颜色是非常重要的元素之一，它可以传达信息、强调重点并影响用户的感官体验。在本篇文章中，我们将探讨如何在 Material Design 中应用各种不同的颜色，并给出示例代码供读者参考。
Material Design 颜色的分类
在 Material Design 中，颜色被分为两类：品牌色和基础色。
品牌色
品牌色是应用程序中最重要的颜色之一，它应该与应用程序的标志和主题保持一致。品牌色通常用于按钮、链接、进度条、滑块等物件上，以强调用户应该关注它们。Material Design 中的品牌颜色包括红色、粉色、紫色、深紫色、靛色、蓝色、亮蓝、青色、绿色、黄色和橙色。
基础色
基础色指的是白色和黑色及其变体：浅灰色、灰色和深灰色。基础色在 Material Design 中被用于背景、类型和布局元素。
如何应用 Material Design 颜色
提取 Material Design 颜色
Google 提供了一些工具可以用来提取 Material Design 的颜色。例如，Material Color System 可以用来创建品牌色调色板。
-- -------------------- ---- -------
---- ------------- ------ ------- ---
---- --------------------------
---- ------------------------
---- ------------------ -----------
---- ------------------ ------------
---- ------------------ --------------
------
---- ------------------------
---- ------------------ -------------------
---- ------------------ --------------
---- ------------------ ------------
------
---- ------------------------
---- ------------------ ------------------
---- ------------------ ------------
---- ------------------ ------------
------
---- ------------------------
---- ------------------ -------------
---- ------------------ --------------
---- ------------------ --------------
------
------在示例代码中，我们使用了 mdc-palette 类来展示 Material Design 品牌颜色调色板，然后将它们分为四行，每行三个颜色。
使用 Material Design 颜色
为了使用 Material Design 的颜色，在 HTML 或 CSS 中加入颜色关键字就可以了。例如，在 HTML 中加入 class="mdc-button--raised mdc-button--primary" 可以使用 Material Design 的红色进行按钮着色。
<!-- 示例代码：Material Design 红色按钮应用 --> <button class="mdc-button mdc-button--raised mdc-button--primary"> 购买升级版 </button>
在示例代码中，我们声明了一个 mdc-button 类来使用 Material Design 的按钮样式，然后加入 mdc-button--raised 和 mdc-button--primary 类来让这个按钮变成红色的。
使用 Sass 变量
使用 Sass 变量可以方便地在整个项目中使用 Material Design 颜色。首先，需要引入 Material Design 的颜色库：
@use "@material/theme/colors";
然后，就可以在 Sass 中使用颜色变量了：
$my-color: colors.$indigo-500;
在示例代码中，我们声明了 $my-color 变量并将其设置为 Material Design 的靛色 500。
使用 Props
如果您正在使用 Vue 或 React，可以使用 Props 来使用 Material Design 颜色。例如，在 Vue 中，您可以使用 props 来传递颜色：
-- -------------------- ---- -------
---- -------- -- ----- ---
----------
------- --------------------------- ------------- - -------
---
---------
-----------
--------
------ ------- -
------ -
------ -
----- -------
-------- ---------
-
-
--
---------在示例代码中，我们声明了一个 color 属性，并设置默认的 primary。这个属性可以在 mdc-button-- 类的前面插入，并用作按钮的颜色。
解决问题
在 Material Design 中使用不同的颜色时，需要注意以下两个问题。
对比度
一些用户可能会有视力障碍，因此 Material Design 建议使用高对比度颜色，以确保这些用户也能轻松地阅读和交互。要设计具有足够对比度的应用程序，可以使用 Color Tool 来生成对比度报告。
一致性
为了使您的应用程序更具吸引力，您可能需要添加自定义样式或颜色。但是，Material Design 建议使用 Material Design 品牌色和基础色，并尽量避免在不同物件之间使用相似的颜色，以确保一致性和易用性。
总结
在本篇文章中，我们探讨了如何在 Material Design 中应用各种不同的颜色。我们了解了品牌色和基础色的分类，并提供了一些示例代码，供读者参考。同时，我们还讨论了如何解决颜色在应用程序中出现的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65197ac095b1f8cacd1a3298