randomColor使用方法

在浏览器中
使用随机颜色在浏览器中,下载最新版的 randomColor 然后引入网页中,然后调用:

var color = randomColor(); // a hex code for an attractive color

在 Nodejs 服务端
使用随机颜色在带有 node.js 的服务器上,通过 npm 安装:

npm install randomcolor

然后这样调用:

var randomColor = require('randomcolor'); // import the script
var color = randomColor(); // a hex code for an attractive color

可选参数
您可以传递一个选项对象来影响它生成的颜色类型。Options对象接受以下属性:

hue-控制生成颜色的色调。您可以传递一个表示颜色名称的字符串:red, orange, yellow, green, blue, purple, pink和monochrome目前是支持的。如果您传递一个十六进制颜色字符串,如 #00FFFF,随机颜色将提取其色调值,并使用它生成颜色。
luminosity-控制生成颜色的亮度。可以指定包含以下内容的字符串bright, light或dark.
count-一个整数,它指定要生成的颜色数。
seed-一个整数或字符串,在传递时会导致随机颜色每次返回相同的颜色。
format-指定生成颜色的格式的字符串。可能的值是 rgb, rgba, rgbArray, hsl, hsla, hslArray和hex(默认)
alpha-小数点在0到1之间。只有在使用带有alpha通道的格式时才相关(rgba和hsla)。默认值为随机值。
实例

// Returns a hex code for an attractive color
randomColor(); 

// Returns an array of ten green colors
randomColor({
   count: 10,
   hue: 'green'
});

// Returns a hex code for a light blue
randomColor({
   luminosity: 'light',
   hue: 'blue'
});

// Returns a hex code for a 'truly random' color
randomColor({
   luminosity: 'random',
   hue: 'random'
});

// Returns a bright color in RGB
randomColor({
   luminosity: 'bright',
   format: 'rgb' // e.g. 'rgb(225,200,20)'
});

// Returns a dark RGB color with random alpha
randomColor({
   luminosity: 'dark',
   format: 'rgba' // e.g. 'rgba(9, 1, 107, 0.6482447960879654)'
});

// Returns a dark RGB color with specified alpha
randomColor({
   luminosity: 'dark',
   format: 'rgba',
   alpha: 0.5 // e.g. 'rgba(9, 1, 107, 0.5)',
});

// Returns a light HSL color with random alpha
randomColor({
   luminosity: 'light',
   format: 'hsla' // e.g. 'hsla(27, 88.99%, 81.83%, 0.6450211517512798)'
});

为什么有这个库?
有很多聪明的人肯定会说使用下面的代码就能生成随机颜色:

'#' + Math.floor(Math.random()*16777215).toString(16);
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值