randomColor 生成随机颜色的 JavaScript 小脚本 - 文章教程

randomColor 生成随机颜色的 JavaScript 小脚本

发布于 2020-10-12 字数 9368 浏览 1969 评论 0

randomColor 是一个用于生成吸引人的随机颜色的小脚本,randomColor 已经移植到 C#, C++, Go, Haskell, Mathematica, PHP, Python, Swift, Perl6, Objective-C, Java, R, ReasonRust

randomColor 生成随机颜色的 JavaScript 小脚本

使用方法

在浏览器中

使用随机颜色在浏览器中,下载最新版的 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, pinkmonochrome目前是支持的。如果您传递一个十六进制颜色字符串,如 #00FFFF,随机颜色将提取其色调值,并使用它生成颜色。
  • luminosity-控制生成颜色的亮度。可以指定包含以下内容的字符串bright, lightdark.
  • count-一个整数,它指定要生成的颜色数。
  • seed-一个整数或字符串,在传递时会导致随机颜色每次返回相同的颜色。
  • format-指定生成颜色的格式的字符串。可能的值是 rgb, rgba, rgbArray, hsl, hsla, hslArrayhex(默认)
  • alpha-小数点在0到1之间。只有在使用带有alpha通道的格式时才相关(rgbahsla)。默认值为随机值。

实例

// 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);

不幸的是,这段代码带来了灰色、褐色和绿色,色源特别报告员是错误造成的。更具体的是,蓝光呈现出明亮的颜色,具有高得令人眼花缭乱的颜色。这使得 RANDOM 的颜色一致被用于数据验证和生成艺术。

使用示例

调用 randomColor() 将返回具有颜色的 random。下面是被称为54次的 rdomColor 的输出。

randomColor(); // Returned a random color as a hex string

randomColor 生成随机颜色的 JavaScript 小脚本

您还可以将操作对象传递给 randomColor。这就要求你描述一下你的色调、性格以及你对他的看法。

Similar col­ors

randomColor({hue: 'red', count: 18});

randomColor 生成随机颜色的 JavaScript 小脚本

randomColor({hue: 'orange', count: 18});

randomColor 生成随机颜色的 JavaScript 小脚本

randomColor({hue: 'yellow', count: 18});

randomColor 生成随机颜色的 JavaScript 小脚本

randomColor({hue: 'green', count: 18});

randomColor 生成随机颜色的 JavaScript 小脚本

randomColor({hue: 'blue', count: 18});

randomColor 生成随机颜色的 JavaScript 小脚本

randomColor({hue: 'purple', count: 18});

randomColor 生成随机颜色的 JavaScript 小脚本

randomColor({hue: 'pink', count: 18});

randomColor 生成随机颜色的 JavaScript 小脚本

randomColor({hue: '#00FFFF', count: 18});

randomColor 生成随机颜色的 JavaScript 小脚本

randomColor({hue: 'monochrome', count: 18});

randomColor 生成随机颜色的 JavaScript 小脚本

Light col­ors

randomColor({luminosity: 'light',count: 27});

randomColor 生成随机颜色的 JavaScript 小脚本

Dark col­ors

randomColor({luminosity: 'dark', count: 27});

randomColor 生成随机颜色的 JavaScript 小脚本

Truly ran­dom col­ors

randomColor({hue: 'random',luminosity: 'random',count: 54});

randomColor 生成随机颜色的 JavaScript 小脚本

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清欢

文章 1 评论 0

贱贱哒

文章 3 评论 0

悸初

文章 2 评论 0

西瓜杏

文章 0 评论 0

各自安好

文章 0 评论 0