Material Design 中的控件是一个全新的设计语言，它提供了一种现代的、更加绚丽和友好的用户界面设计。其中，控件颜色的配色是其中的关键部分。本文将介绍 Material Design 中控件颜色的提取和配色实践，以及在前端开发中的应用。
控件颜色的提取
Material Design 中控件颜色的提取是基于色相圆的。每个控件的主色调都是由两个基本颜色组成的，分别为“Primary Color”和“Secondary Color”。其中，“Primary Color”是主色调，通常会应用到应用的大部分区域中，比如应用栏、按钮等。而“Secondary Color”则是用于强调性的背景色、分割线等元素上。
首先，我们需要选择主色调的基本颜色，以蓝色为例。可以使用 Adobe Color Picker 工具（https://color.adobe.com/create/color-wheel/）来选取蓝色的对应颜色。选择好颜色后，我们需要确定该颜色的辅助色调，这些颜色将与主色调一起用于构建控件的配色方案。
Material Design 为我们提供了一组辅助色调，每个颜色与主色调形成了一个 tetradic（四色）关系。因此，我们可以根据主色调的选取，自动得出配色方案。我们可以看一下下面的例子：
-- ---- - ---- ----- ------------- -------- -- ---- - --------- ------ ------------ -------- ------------- -------- ------------- -------- ------------- -------- ------------- -------- ------------- -------- ------------- -------- ------------- -------- ------------- -------- ------------- --------
上面的代码中，我们选取了蓝色作为主色调，然后从该颜色的 tetradic（四色）关系中选取了 9 个配色。下面，我们就可以利用这些配色来构建我们应用的控件样式。
控件颜色的配色实践
在实际应用中，我们需要用所选的颜色来配合我们的控件。下面我们以一个列表为例进行说明：
-- ---- ------- ------ --------------- ------------ -------------------- ---------- ------------------------ ------------- -------------------------- ------------- --------------------------- ------------- ----------------- -------------
上面的代码中，我们给出了一个列表的控件样式。其中，$list-bg-color 是列表的背景色，$list-item-bg-color 是列表项的背景色，$list-item-border-color 是列表项的边框颜色，$list-item-hover-bg-color 是列表项的鼠标悬停背景色，$list-item-active-bg-color 是列表项的激活背景色，$list-text-color 是列表中文本的颜色。
下面，我们可以根据以上控件颜色样式进一步制作我们的实际列表控件：
-- ---- -------
----- -
----------------- ---------------
------- --- ----- ------------------------
-------------- ----
-------- -----
-- -
----------------- --------------------
-------------- --- ----- ------------------------
-------- -----
---------------- --------------
------------ -------
-------- ----
------- -
----------------- --------------------------
-
-------- -
----------------- ---------------------------
-
----- -
----- --
------ -----------------
-
------ -
-------------- ----
------- -----
------ ----------
----------------- -------------
-------- --- ----
-------- -----
------- -
----------------- --------------------- -----
-
-------- -
----------------- -------------------- -----
-
-
-
-上面的代码中，我们根据前面定义的 $list-bg-color、$list-item-bg-color 等控件颜色样式来制定列表的样式。我们可以看到，控件颜色的提取和配色实践可以非常方便地制作控件，这样我们就可以快速应用到我们的前端项目中。
总结
本文介绍了 Material Design 中控件颜色的提取和配色实践，并通过一个列表控件的例子来说明控件的制作过程。我们可以看到，在前端开发中，控件颜色的配色非常重要，是构建良好前端应用的关键部分。同时，我们还可以通过 Material Design 中提供的配色方案来简便地进行控件颜色的提取和配色实践。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654874777d4982a6eb2b7b79