在进行前端项目开发时，我们经常需要使用到各式各样的 npm 包。在这些包中，有一类是用于生成配色方案的，比如 color-convert、tinycolor2 等。而 plator 就是这类 npm 包之一，可以用于生成平衡、协调的色彩方案，帮助设计者和开发者快速生成好看的配色方案。
安装
使用 npm 进行安装：
--- ------- ------ ------
使用
初始化
在代码中引入并初始化 plator：
----- ------ - ------------------ ----- ------ - --- ---------
生成配色方案
----- ------ - --------------------------------- --------------------
接收一个参数：主颜色，返回一个对象，包含以下属性：
- palette：规定了一组颜色
- contrastPalette：这组颜色的高对比度版本
- tints：这个主颜色的不同变化程度的浅色
- shades：这个主颜色的不同变化程度的深色
- greyscale：中性色方案，状态包括纯白、浅灰、灰色和深黑色
代码示例
----- ------ - ------------------ ----- ------ - --- --------- ----- ------ - --------------------------------- ------------------------ ---------------------------- ----------------------- ----------- ------------------------------------ ------------------------ -------------------------- ------------------------- --------------------------- ---------------------------- ------------------------------
结果：
-------- - ----- ---------- ------ ---------- ------ ---------- ------ ---------- ------ ---------- ------ ---------- ------ ---------- ------ ---------- ------ ---------- ------ --------- - -------- -------- - ----- ---------- ------ ---------- ------ ---------- ------ ---------- ------ ---------- ------ ---------- ------ ---------- ------ ---------- ------ ---------- ------ --------- - ------ - ----- ---------- ----- ---------- ----- ---------- ----- ---------- ----- ---------- ----- ---------- ----- ---------- ----- ---------- ----- --------- - ------- - ----- ---------- ----- ---------- ----- ---------- ----- ---------- ----- ---------- ----- ---------- ----- ---------- ----- ---------- ----- --------- - ---------- - ---- ---------- ----- ---------- ----- ---------- ----- ---------- ----- ---------- ----- ---------- ----- ---------- ----- ---------- ----- ---------- ----- --------- -
参考
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005675381e8991b448e3d17