在前端开发中，我们常常需要使用到颜色，但是每个项目都是不同的，有时候难免会遇到一些设计师要求使用哪些颜色，那么我们就需要找一个方便、普适性高的解决方案，这时候 google-material-color 就是一个不错的选择。本文旨在介绍如何使用npm包 google-material-color，以及如何在实际开发中使用它。
什么是google-material-color
google-material-color 是一个基于Google Material Design 设计风格的颜色库，里面包含了700种颜色。这个库将所有颜色分为11个颜色主题，每个主题又包含50个颜色变种，以此来提供给设计师与开发人员更加便捷、高效的使用。
如何使用
在使用 google-material-color 库之前，需要先安装它，可以通过npm在终端中输入以下指令进行安装：
npm install google-material-color --save
安装完成后就可以在项目中引入它了，下面的示例中我们将使用红色的颜色主题，示例代码如下：
import red from 'google-material-color/red'; console.log(red[100]); // 输出：#FF8A80 console.log(red[200]); // 输出：#FF5252
示例代码中我们使用了 import 将红色主题引入到了我们的js文件中，并且输出了它的100个颜色变种，red[100] 代表的是变种为100的颜色值，下面是这个项目中其他的颜色主题：
- pink
- purple
- deep-purple
- indigo
- blue
- light-blue
- cyan
- teal
- green
- light-green
- lime
- yellow
- amber
- orange
- deep-orange
- brown
- grey
- blue-grey
如果需要使用其他颜色主题，只需要将 red 替换为你需要的颜色主题即可。
实际应用
除了以上提到的使用示例外，我们还可以通过 google-material-color 库来生成一个自定义主题的颜色库，下面是一个简单的示例代码：
-- -------------------- ---- -------
------ ------ ---- ------------------------
----- --------- - ---
----------------------- - ---
----------------------------------- -- -
----- ------------ - ---
------------------------------------------ -- -
------------------- - ---------------------------
---
------------------------------ - -------------
---
---------------------------------------------- -- ----------在这个示例代码中，我们新建了一个名为 yourThemeName 的自定义颜色主题，并遍历了 google-material-color 中的所有颜色主题和颜色变种，并把它们的颜色值转换成16进制的格式，最后将转换好的颜色库放进了新建的颜色主题 yourThemeName 中，下面是一个新建的自定义颜色库：
-- -------------------- ---- -------
-
-------------- -
---- -
--- ----------
---- ----------
---- ----------
---- ----------
---- ----------
---- ----------
---- ----------
---- ----------
---- ----------
---- ----------
----- ----------
----- ----------
----- ----------
----- ---------
--
----- ------
------- ------
---
-
-看到这里，你是否也惊叹于 google-material-color 的强大之处呢？
总结
在前端开发中，颜色的使用是不可避免的，而 google-material-color 库的出现，为我们提供了一种新的解决方案。它不仅仅包含了700种颜色，还可以帮助我们快速生成自定义颜色主题的颜色库，非常方便高效。希望本文能够对你有所帮助，也希望大家在实际开发中多加利用这个强大的npm包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/76814