在前端开发过程中，我们会经常需要使用颜色搭配方案，而这时候就需要一个好用的工具来快速地选择搭配方案。npm 包 Colorable 就是这样一个方便、快捷、易用的工具，它不仅提供了多种颜色搭配方案，还能够帮助我们进行颜色对比度的分析。
本篇教程将会介绍 npm 包 Colorable 的使用方法，以及如何在我们的项目中进行快速的使用。
安装 colorable
Colorable 是一个 npm 包，所以我们需要在项目中安装这个包。我们可以使用以下命令来安装 colorable：
npm install --save colorable
使用 Colorable
在安装完成 Colorable 之后，我们可以在代码中引用它：
import colorable from 'colorable'
有了 colorable 之后，我们就可以使用它提供的 API 来进行各种处理了。下面是一些常用的 API：
combinations()
该 API 可以返回一个基色的所有颜色搭配方案的对比度分析结果。我们可以通过以下代码来获取蓝色的所有搭配方案：
const combos = colorable.combinations('#0074d9');
其中 '#0074d9' 是我们要搭配的基色。combos 的值将会是一个数组，数组的每一个元素都是一个对象，描述了基色与其他颜色的对比度分析结果。每一个对象包含以下属性：
background: 背景颜色。foreground: 前景颜色。name: 颜色名称。combinations: 基色和配色的对比度。
下面是一个例子：
-- -------------------- ---- ------- - - ------------- ---------- ------------- ---------- ------- ------------ --------- --------------- - ----------- ----- ----- ----- ------ ----- - -- - ------------- ---------- ------------- ---------- ------- ------------ --------- --------------- - ----------- ----- ----- ----- ------ ----- - -- - ------------- ---------- ------------- ---------- ------- ------------ --------- --------------- - ----------- ----- ----- ------ ------ ----- - -- -- --- -展开代码
toPalette()
如果我们想要将一个颜色搭配方案转换为对应的调色板，就可以使用 toPalette() API。例如，我们可以将下面这个搭配方案转换为调色板：
const palette = colorable.toPalette({ background: '#f3f3f3', foreground: '#0074d9' })
palette 的值将是一个调色板对象，它的属性包含：
light1: 前景色。light2: 中亮度色。light3: 中高亮度色。dark1: 背景色。dark2: 中灰度色。
下面是一个例子：
{ "light1": "#0074d9", "light2": "#6a6a6a", "light3": "#b6b6b6", "dark1": "#f3f3f3", "dark2": "#bdbdbd" }
isReadable()
isReadable() API 可以判断两个颜色是否有足够的对比度，是否适合在一起使用。例如，我们可以使用以下代码来判断 #0074d9 和 #fff 是否适合一起使用：
const isReadable = colorable.isReadable('#0074d9', '#fff');
isReadable 的值将是一个布尔值，如果两个颜色有足够的对比度，则返回 true，否则返回 false。
使用示例
我们可以使用 Colorable 来对整个调色板进行搭配。例如，我们可以使用下面的代码来获取一组基础颜色：
const basicColors = [ '#0074d9', '#2ecc40', '#ff851b', '#d35400', '#b10dc9', '#7f8c8d' ];
然后，我们可以使用 for 循环来获取每一个基色的颜色搭配方案和调色板：
for (let i = 0; i < basicColors.length; i++) { const combos = colorable.combinations(basicColors[i]); const palette = colorable.toPalette(combos[0]); // 打印调色板 console.log(palette); }
这段代码将会输出每一个基色对应的调色板。
结论
Colorable 是一个非常方便、快捷、易用的颜色搭配方案工具，我们可以在项目开发过程中非常方便地使用它来快速地获取颜色搭配方案，并且分析配色的对比度。它不仅仅是一个使用工具，更是一份学习资料，能够教会我们如何搭配漂亮的颜色，并将颜色搭配理论带给我们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f6c626ca9b7065299ccb93d
