Material Design 是 Google 推出的一款新型设计语言，目的是为了统一 Android、Web 等多个平台的设计风格，提供更好的用户体验。其中，颜色规范是 Material Design 的重要组成部分之一。本文将详细介绍 Material Design 的颜色规范，并通过示例代码演示如何在应用中使用。
Material Design 的颜色规范
Material Design 提供了 2 种颜色规范：基础颜色和辅助颜色。其中基础颜色包括红、粉、紫、深紫、青、蓝、浅蓝、绿、黄、橙、棕和灰 13 种颜色。每种颜色都有 10 级深度，从 50 到 900，颜色深度逐级增加，颜色越来越深。例如，蓝色的 50 级为 #E3F2FD，900 级为 #0D47A1。
辅助颜色包括了 8 种颜色，可用于突出显示应用中的元素，如文本、图标、背景等。这些颜色不受深度级别的限制，只有一组固定的颜色值。
除了基础颜色和辅助颜色，Material Design 还提供了标准化的颜色组，可用于分配一组相关颜色。例如，警告颜色组包括了红色、粉红色、黄色、橙色等几种颜色，这些颜色的主题都可以是“警告”。
如何在应用中使用
在应用中使用 Material Design 的颜色规范十分简单。你可以在 CSS 中使用以下语法：
/* 使用基础颜色中的颜色 */ color: var(--md-blue-500); /* 使用辅助颜色中的颜色 */ background-color: var(--md-amber-A400); /* 使用颜色组中的颜色 */ color: var(--md-warning-primary);
如果你使用的是 SCSS 或者 Less 等预处理语言，可以使用类似下面这样的 mixin，简化样式的编写：
-- -------------------- ---- ------- -- ---- -- ------ --------------------- ------- ---- - ------ ------------------------------ - -- ---- -- ------ ----------------------- - ----------------- ------------------------- - -- --- -- ------ ---------------------- - ------ ---------------------------- ----------------- -------------------------- -
示例代码（基于 Vue.js）：
-- -------------------- ---- -------
----------
---- ------------------
---- ------ ---
--- --------- ------ --------- ----------- ------ ---------
---- ------ ---
------- ------------------------------------
------- ----------------------------------------
---- ----- ---
----- -------------------------------
----- ----------------------------
------
-----------
--------
------ ------- -
------ -
------ -
---------- --------------------- -- ------
-
-
-
---------
------ -------
-- -
-------- ------------------- ----- -- -- -----
-
------------ -
-------- ------------------------ -- -- -----
-
-------------- -
-------- ----------------------
-------- ---
-
-------------- -
-------- ------------------------ -- -- -----
-
----------- -
-------- ---------------------
-
--------以上示例代码演示了如何使用基础颜色、辅助颜色和颜色组。需要注意的是，必须使用 var() 函数获取真正的颜色值，而不能直接写成 color: #0D47A1 的形式。
总结
Material Design 的颜色规范提供了多种颜色选择，可以让应用的设计风格更加协调。在应用中使用 Material Design 的颜色规范也非常简单，只需要使用预定义好的颜色变量即可。希望本文能帮助读者更好地学习和使用 Material Design。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645a4916968c7c53b0c839cb