在前端开发中，我们经常需要使用颜色来对页面进行样式设计，有许多种方法来定义颜色，例如，使用基本颜色值、RGB 值、十六进制值等等。 这些都需要我们手动去枚举确定颜色。
那有没有一款工具，能够自动为我们定义一些好看的颜色能提升我们的工作效率呢？ 答案是肯定的，我们今天介绍的是 npm 包——color.css。
color.css 是什么？
color.css 是一个轻量级的 CSS 文件，其中包含了一些亮丽的颜色样式，能够方便的帮助我们定义好看的颜色。
color.css 中所包含的颜色主要提供了两种模式：
Color Names（颜色名）：这是一些比较常用的颜色，例如 red、green、blue 等等。
Color Shades（颜色渐变）：这是一种可以给予单一颜色值的渐变式样，它由黑到白之间的变化组成。
如何使用 color.css？
接下来，我们将一步步来演示如何使用 color.css。
安装 color.css
在这里，我们将使用 npm 来安装 color.css：
--- ------- ---------
color.css 将被安装到你的项目根目录的 node_modules 目录下，现在我们需要将它引入到我们的项目中：
引入 color.css
在 HTML 中，我们可以通过添加以下代码来引入它：
----- ---------------- ---------------------------------------------------
现在，我们已经成功的在我们的项目中引入了 color.css。
使用 color.css
color.css 提供了很多种颜色选择，不过为了演示方便，这里我们只介绍中比较常用的一些方法。
首先，我们可以通过直接在标签中加入 color 的 class 来直接定义颜色，例如：
---- ------------------------------- ---- --------------------------------- ---- ---------------------------
其次，我们可以使用 color-shades 类来定义渐变颜色，例如：
---- -------------------------------- ------- ---- -------------------------------- ------- ---- -------------------------------- -------
最后，我们还可以通过变量的方式来自定义颜色，例如：
----- - --------------- -------- - ------- - ------ -------------------- -
在这个例子中，我们定义了一个叫做 --color-custom 的变量，并通过 var() 函数来引用它。
总结
npm 包 color.css 是一个帮助我们方便定义颜色的工具，能够大大提升我们的工作效果，减少重复的劳动。 我们通过使用 npm，可简单地把它添加到我们的项目中，可以直接在 HTML 中定义颜色、使用渐变颜色或者自定义颜色。 它值得我们一试！
示例代码：https://github.com/mdblp/color.css-example
（完）
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056d1281e8991b448e6d06