生成引人注目色彩的小型Javascript脚本——randomColor

yumo6663个月前 (05-03)技术文章17

介绍

randomColor是一个生成随机颜色的JavaScript脚本,对于写代码的我们来说,生成一个随机颜色或许并不复杂,但是想要生成一个比较吸引人的随机颜色可能是需要花费一番功夫的,但如果已经有人实现了这样一个小功能,那么我们直接使用即可,不需要再花费心思研究那么深,一起来看看吧!

randomColor已移植到C#,C ++,Go,Haskell,Mathematica,PHP,Python,Swift,Perl6,Objective-C,Java,R,Reason和Rust。






Github地址

https://github.com/davidmerfield/randomColor

使用方式

本文只是简单介绍下在浏览器中使用,我相信在Web开发中使用的还是最多的,我们可以直接使用cdn或者下载脚本下来直接引入:

  • 使用
var color = randomColor();

要在服务器上使用带有node.js的randomColor,请从npm安装randomColor,然后调用脚本:

var randomColor = require('randomcolor'); // 引入
var color = randomColor(); // 16进制
  • 配置

可以传递配置对象以便于产生特定的结果出来:

hue ——控制生成的颜色的色调。可以传代表颜色名称的字符串:当前支持红色,橙色,黄色,绿色,蓝色,紫色,粉红色和黑白(red, orange, yellow, green, blue, purple, pink 和 monochrome)。如果您传递十六进制颜色字符串(例如#00FFFF),则randomColor将提取其色相值并使用该值生成颜色

luminosity——控制所生成颜色的亮度。您可以指定一个包含亮,亮或暗的字符串(bright, light or dark)。

count——指定要生成的颜色数

seed 一个整数或字符串,该整数或字符串在传递时将导致randomColor每次返回相同的颜色。

format ——指定生成的颜色的格式。可能的值为rgb,rgba,rgbArray,hsl,hsla,hslArray和hex(默认值)。

alpha ——介于0和1之间的十进制数。仅当使用带有alpha通道的格式(rgba和hsla)时才相关。默认为随机值。

  • 示例代码
// 返回具颜色的十六进制代码
randomColor(); 

// 返回十个绿色的数组
randomColor({
   count: 10,
   hue: 'green'
});

// 返回浅蓝色的十六进制代码
randomColor({
   luminosity: 'light',
   hue: 'blue'
});

// 返回“真正随机”颜色的十六进制代码
randomColor({
   luminosity: 'random',
   hue: 'random'
});

// 返回RGB的明亮的颜色
randomColor({
   luminosity: 'bright',
   format: 'rgb' // e.g. 'rgb(225,200,20)'
});

// 返回带有随机alpha的深色RGB颜色
randomColor({
   luminosity: 'dark',
   format: 'rgba' // e.g. 'rgba(9, 1, 107, 0.6482447960879654)'
});

// 返回具有指定alpha的深色RGB颜色
randomColor({
   luminosity: 'dark',
   format: 'rgba',
   alpha: 0.5 // e.g. 'rgba(9, 1, 107, 0.5)',
});

// 返回带有随机Alpha的浅色HSL颜色
randomColor({
   luminosity: 'light',
   format: 'hsla' // e.g. 'hsla(27, 88.99%, 81.83%, 0.6450211517512798)'
});

总结

randomColor是一个小型JavaScript脚本,虽然功能不多,但是针对颜色这一块还是非常值得使用的,对于大多数场景已经完全够用!enjoy it!

相关文章

CSS常用十六进制颜色代码对照表(十六进制颜色代码原理)

我们在做网页时,经常会用到十六进制颜色代码,一个漂亮的网页,它的颜色搭配必定有讲究,下表是一些常用的颜色及十六进制颜色代码对照,记录在此,以便查阅!...

PC网站建设必备代码知识:HTML基础与应用技巧

在PC网站建设的相关课程里,代码扮演着至关重要的角色。只有熟练运用正确的代码,我们才能打造出功能完善、用户体验出色的PC网站。接下来,我会详细讲解在PC网站建设环节中必须了解的代码知识。HTML基础代...

vb.net的颜色赋值代码(vb颜色表示代码)

有没有人跟我一样,对颜色的名称,除了常用的几种(如红色,白色,黄色,蓝色,绿色,黑色),就无法说出其它颜色的名称来。我解决这个问题的办法,我有一个图,上面都是Color结构已经定义的颜色的名称及对应颜...

45个颜色网站,设计师必备指南(推介几个有颜色的网站)

颜色搭配不知所措?颜色参考找不到心仪网站?来!收下这份全面的色彩网址吧!配色是设计中非常重要的部分,好的配色不仅可以让我们的设计更加出彩,还能对用户产生情感影响,相信这些网站一定能对你们有所帮助~1....

Win10下,让Firefox 40浏览器也用上彩色标题栏

Mozilla不久前刚发布了针对Win10进行优化的火狐浏览器Firefox 40。最新版主要针对触摸屏进行了优化,默认主题颜色为灰色不可调,即使你通过《让Win10标题栏恢复五彩缤纷,不再“惨白”》...

04大学生爱编程,学习HTML网页开发教程 做程序员大神

做全栈攻城狮-每日更新原创IT编程技术及日常实用视频。主要内容:这是HTML课程的第四课,主要讲解HTML的文字标签和格式标签。在今天我们做一个属于自己的简历。上节回顾在上一节中主要讲解了HTML的标...