简介
随机颜色是前端开发中常用的一个功能，比如在给元素设置背景颜色时使用。但是自己写随机颜色函数并不方便，因为需要考虑边界情况、去重颜色等问题。@danywits/randomcolor 就是一个可以轻松实现随机颜色功能的 npm 包。
安装
使用以下命令进行安装：
npm install @danywits/randomcolor
使用方法
在 javascript 中使用以下代码引入包：
const randomColor = require('@danywits/randomcolor');然后就可以调用 randomColor() 函数来获得一个随机颜色了。该函数支持以下参数：
| 参数 | 描述 | 默认值 |
|---|---|---|
| format | 输出格式。可以是 hex（如 #3a8fec）、rgb（如 rgb(58, 143, 236)）或 hsl（如 hsl(218, 75%, 55%)） |
hex |
| luminosity | 颜色明亮度。可以是 bright（亮色）、light（淡色）或 dark（暗色） |
random |
| hue | 颜色色相。可以是 red、orange、yellow、green、blue、purple、pink 或 monochrome（单色） |
random |
| count | 需要多少个随机颜色 | 1 |
举个例子：
console.log(randomColor());
// 输出：#26e8d7
console.log(randomColor({ format: 'rgb', luminosity: 'dark' }));
// 输出：rgb(27, 38, 23)
console.log(randomColor({ format: 'hsl', hue: 'blue', count: 5 }));
// 输出：["hsl(209, 66%, 82%)", "hsl(194, 96%, 82%)", "hsl(215, 80%, 74%)", "hsl(195, 63%, 69%)", "hsl(208, 78%, 80%)"]示例代码
例 1
在 HTML 中使用 style 属性设置 body 标签的背景颜色，使用随机颜色：
-- -------------------- ---- ------- --------- ----- ------ ------ --------------------- ------- ------------------------------------------------------------- ------- ----- ------------------------ --- ------------- ------- ----- -- ----- --------------- ----- -------- ------------------------------------------------- ------- -------
例 2
使用 canvas 绘制一个随机颜色的矩形：
-- -------------------- ---- -------
--------- -----
------
------
---------------------
------- -------------------------------------------------------------
-------
------
---------------
------- ----------- ----------- ----------------------
--------
----- ------ - ----------------------------------
----- --- - ------------------------
------------- - ------------- ------- ----- ---
--------------- -- ---- -----
---------
-------
-------结束语
在实际开发中，使用 @danywits/randomcolor 可以非常方便地实现随机颜色功能，大大提高了开发效率和代码可读性。为了使使用的随机颜色更和谐、美观，建议在选择明亮度和色相时，根据自己的设计需要进行选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fd981e8991b448dd6c1