前言
在项目中常常会遇到根据一个主颜色,然后生成一整个主题色系各种层次颜色的需求,尤其在切换主题、随机展示内容等场景。
恰好找到了一库可以实现此功能,话不多说,我们一起来看看吧。
randomColor
线上 github 地址:https://github.com/davidmerfield/randomColor
目前这个项目已经被移植到了各个常用语言中,例如C#
, C++
, Go
, Haskell
,Kotlin
, Mathematica
, PHP
, Python
, Raku
, Objective-C
, Java
, R
, Reason
, Dart
, Ruby
, Rust
, Swift
,Typescript
,等等。具体仓库链接可在 github 仓库页面中找到。
也就是说,这个项目不仅在 JavaScript
环境可用,其他诸如后端
、移动端
等等都是可用的。
官方说明为:A tiny script for generating attractive colors
即:一个生成漂亮颜色的简易脚本。
使用方式
安装
npm install randomcolor
基本使用
var randomColor = require('randomcolor'); // import the script
var color = randomColor(); // a hex code for an attractive color
每一次执行都返回了一个随机的颜色值
参数说明
-
hue
- 控制生成颜色的色调。可以传递表示颜色名称的字符串例如red
,yellow
等。如果传递十六进制颜色字符串,randomColor 将提取其色相值并使用它来生成颜色。 -
luminosity
– 控制生成颜色的亮度。可以使用:bright
、light
、dark
-
count
- 一个整数,指定要生成的颜色数。 -
seed
- 一个整数或字符串,传递时将导致 randomColor 每次都返回相同的颜色,这在主题色中可以命名使用,让每次走相同主题名称的时候,返回相同的颜色组。 -
format
– 一个字符串,用于指定生成的颜色的格式。可能的值为rgb
,rgba
,rgbArray
,hsl
,hsla
,hslArray
,hex
, 默认为hex
-
alpha
– 介于 0 和 1 之间的小数,默认为随机值。
场景实例代码
randomColor({
hue:"yellow",
luminosity:"dark",
count:10,
seed:"test",
format:"hex",
alpha:0.5
})
我们可以得到以下结果
该代码生成了 10 个黄色相关暗色主题的颜色
总结
randomColor
是一个非常轻量化的色值生成器,代码也极其简单,总共 5kb
左右。
功能也非常直接实用,希望能对大家的场景有所帮助。
– 欢迎点赞、关注、转发、收藏【我码玄黄】,各大平台同名。