随机颜色在前端开发中十分常见，如标签、图表等场景中需要展示不同的颜色。而 npm 包 randomcolor-browser 可以帮助我们快速生成随机的颜色，使用起来十分便利。本文将介绍如何使用这个 npm 包，以及深入探讨其实现原理。
安装 randomcolor-browser
使用 npm 安装 randomcolor-browser：
$ npm install --save randomcolor-browser
安装完成后，可以通过以下方式引入模块：
import randomColor from "randomcolor-browser"
使用 randomcolor-browser
以下是一个简单的示例，生成一个随机的背景颜色：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------- ------------
-------
------
---- ---------------
------- ----------------------------------------------
--------
----- --- - -------------------------------
------------------------- - --------------
---------
-------
-------其中 randomColor() 函数返回一个随机的颜色字符串，默认生成的颜色是亮色。如果需要生成不同颜色系的颜色，可以传入配置项：
randomColor({
hue: 'blue' // 颜色系
})还可以生成指定数量的随机颜色、指定种子生成一致的随机颜色等操作，详见 randomcolor 官方文档。
randomcolor-browser 的实现原理
randomcolor-browser 的实现原理是 HSL（色相、饱和度、亮度） 色彩模型，通过在 HSL 的三个维度上进行随机取值，生成随机颜色。
下面是 randomcolor-browser 的核心代码，进行了简化和注释：
-- -------------------- ---- -------
-------- ----------------- -
-- -----
---- - ---------------
----------- --------- -- ---
---- --------- -- ---
------- ----- -- ----
-- ---- -- ----
-- -----
--- ---------- - ----------------
-- ----------- --- --------- -
---------- - --------------- ---
-
-- -----
--- --- - ---------
-- ---- --- --------- -
--- - --------------- -----
- ---- -- ------- --- --- --------- -
--- - ---------- -- -----
- ---- -
--- - -----------------
-
-- ------
--- ---------- - ------------------- ------------
-- --- --- ----
--- --- - ------------- ----------- ------------
-- ------------ --- ------ -
------ ------ - ----------- -- - ----
- ---- -- ------------ --- ------ -
------ --- - --------------
- ---- -
----- --- -------------- ------- - - -------------
-
-
-------- ----------- -- -- -
--- -- -- --
-- -------- --- ---
- - ------- ---
-- ----------
--- - - - - --- - - - -- - -- - - - - - -- - ---
--- - - -- - -- - --
--- - - ----------- -- - - -- - ----
--- - - ----------- -- ---
--- - - ----------- -- - - -- - ----
------ ------------- - ----- ------------ - ----- ------------ - ------
-
-------- ----------- -- -- -
-- -- - -- - -- --
-- -- - -- - -- --
-- -- - - - -- ------ - - -- - -- - - - --
-- -- - - - -- ------ --
-- -- - - - -- ------ - - -- - -- - -- - - - -- - --
------ --
-可以看到，randomcolor-browser 生成随机颜色的核心就是对 HSL 模型中色相、饱和度、亮度三维度进行随机取值，再转换为 RGB 颜色格式。
总结
npm 包 randomcolor-browser 可以帮助我们快速生成随机颜色，使用起来简单便捷。而其实现核心是 HSL 色彩模型，对于前端开发中色彩方面的知识了解可以更好地理解其实现原理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055cbf81e8991b448da548