介绍
colornames 是一个 npm 包,提供 1653 种命名颜色的映射表,方便在前端开发中使用。这些颜色名称可以直接用在 CSS 或 JavaScript 中。
安装
使用 npm 进行安装:
npm install colornames
使用方法
在 CSS 中使用
在 CSS 中使用 colornames 很简单,只需将颜色名称作为属性值即可:
div { background-color: tomato; color: aliceblue; }
在 JavaScript 中使用
在 JavaScript 中使用 colornames 需要引入包,并通过名称获取颜色的 RGB 值或十六进制字符串:
const colors = require('colornames'); console.log(colors.tomato); // 输出:{ r: 255, g: 99, b: 71 } console.log(colors['alice blue']); // 输出:{ r: 240, g: 248, b: 255 }
注意事项
颜色名称不区分大小写,空格可以用连字符
-
代替;部分颜色可能会有多个名称,如红色可以用
red
或crimson
表示,因此可以使用下面任意一种方式获取颜色值:console.log(colors.red); console.log(colors.crimson);
示例代码
下面是一个使用 colornames 渲染彩虹效果的示例代码:
-- -------------------- ---- ------- --------- ----- ------ ------ ----------------- ------------ ------- ---- - ----------------- ------ - -------- - -------- ----- ---------------- ------- ------------ ------- ------- ------ - -------- ---- - ---------- ----- ------------ ----- ------- - ----- ------------ - - --- ------ - -------- ------- ------ ---- ---------------- ----- ------------- --------------- ----- ------------- --------------------- ----- ------------- --------------------- ----- ------------- ------------------- ----- ------------- ----------------- ----- ------------- --------------------- ----- ------------- --------------------- ------ ------- -------------------------------------------- -------- ----- ------ - ------------------ ----- ------- - ----------------------------------- ------- --- --- - -- -------------- -- - --- -- --- -- ---- -- ---- --- - -- --- ---- - - -- - - --------------- ---- - ---------------------- - ---------- - - - ---- ---- ------ ---------------------- - -------------------- ------------------------ - --------------------------- -- - -- ----- --------- ------- -------
该代码会在页面上渲染出一个彩虹效果的文字,颜色使用 colornames 提供的名称表示。可以通过修改 rainbow[i].style.color
中的 hsl()
函数参数和间隔时间来调整彩虹效果的颜色和速度。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/44144