在前端开发中，常常需要使用配色方案来美化页面或者制作数据可视化图表。但是对于那些缺乏设计经验的前端工程师来说，选择一种好看的配色方案可能会非常困难。幸运的是，有一个叫做 nice-color-palettes 的 npm 包，可以帮助我们快速找到好看的配色方案。
本篇文章介绍了如何使用 nice-color-palettes 包来寻找和应用配色方案，并且提供了一些关于如何选择配色方案的建议。
安装和引入 nice-color-palettes
要使用 nice-color-palettes 包，首先需要在项目中安装它：
npm install nice-color-palettes --save
然后，在需要使用 nice-color-palettes 包的地方，可以这样引入它：
const palettes = require('nice-color-palettes');现在，我们已经可以开始寻找和应用配色方案。
在 nice-color-palettes 中寻找配色方案
nice-color-palettes 包提供了一系列已经设计好的配色方案（也称为色板）。每个色板都是一个数组，包含了若干个颜色值。颜色值是一个数组，包含了四个数字，分别代表红、绿、蓝和透明度。例如：
[ [255, 237, 149, 1], [246, 198, 138, 1], [197, 79, 88, 1], [131, 52, 113, 1], [47, 37, 89, 1] ]
你可以在你的代码中直接引用这个数组，然后根据需要使用其中的颜色值。
nice-color-palettes 包提供了一些方法来帮助你寻找合适的配色方案。以下是一些常用的方法：
palettes(n)
这个方法返回一个数组，包含了 n 个不同的色板。这些色板都是从已经设计好的几千个色板中随机挑选的。例如：
const myPalettes = palettes(3); console.log(myPalettes);
输出：
-- -------------------- ---- -------
-
-
----- ---- ---- ---
----- ---- --- ---
----- ---- --- ---
---- ---- ---- ---
----- --- --- --
--
-
---- --- --- ---
---- --- --- ---
---- --- ---- ---
----- ---- ---- ---
----- ---- ---- --
--
-
---- ---- ---- ---
----- --- --- ---
---- ---- ---- ---
---- ---- ---- ---
----- ---- ---- --
-
-palettes.all
这个属性返回一个包含了所有已经设计好的色板的数组。
const allPalettes = palettes.all; console.log(allPalettes.length);
输出：
2000
palettes.colors(n)
这个方法返回一个长度为 n 的数组，包含了随机选择的若干个颜色值。这些颜色值可以用来创建自定义的色板。
const myColors = palettes.colors(5); console.log(myColors);
输出：
[ [119, 61, 61, 1], [253, 6, 237, 1], [180, 200, 88, 1], [38, 141, 212, 1], [76, 117, 115, 1] ]
如何选择配色方案
nice-color-palettes 包提供了一些好看的配色方案，但是如何选择适合自己项目的配色方案呢？以下是一些建议：
与品牌颜色相似
如果你的项目有一个品牌颜色，可以选择与品牌颜色相似的配色方案。这可以帮助你的网站或者应用程序保持一致性，并且强调品牌标识。
与背景色对比明显
选择与背景色对比明显的配色方案可以帮助用户更容易地看清楚你的内容。一些高对比度的配色方案还可以提高可访问性，使得用户可以更容易地阅读你的网站或者应用程序。
与数据类型相关
如果你的项目需要显示不同类型的数据，可以选择不同的配色方案来表示不同的数据类型。例如，一个电商网站可能使用不同的配色方案来表示特价商品、热销商品和推荐商品。
与目标用户相关
最后，选择配色方案的时候需要考虑目标用户。如果你的用户是年轻人，可以选择颜色鲜艳、明亮的配色方案；如果你的用户是文化人士，可能需要选择更为柔和和优雅的配色方案。
示例代码
下面是一个简单的示例代码，演示了如何使用 nice-color-palettes 包来创建随机配色方案的按钮。点击按钮会随机生成一个一定数量的随机颜色值，然后将它们转换成一个线性渐变背景。
<!-- HTML --> <button id="btn">Generate random colors</button> <div id="box"></div>
-- -------------------- ---- ------- -- ---------- ----- -------- - ------------------------------- ----- --- - ------------------------------- ----- --- - ------------------------------- ----------------------------- -- -- - ----- - - -- ----- ------ - ------------------- ----- -------- - ------------------- ------ ------------------ -- ----------------------------------- ------ ------------------------- - --------- ---
在这个示例代码中，我们首先引入了 nice-color-palettes 包，然后在点击按钮的时候生成随机颜色值和线性渐变背景。这个支线性渐变背景是由若干个颜色值组成的，每个颜色值都被转换成了一个 rgba 颜色值，然后在用逗号隔开。最后，我们将这些 rgba 值合并成一个放到了 linear-gradient 的背景图片中，然后设置给了 box 元素的 backgroundImage 属性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaf65b5cbfe1ea061100c