51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

手残党福音,一键生成随机颜色:randomColor

前言

在项目中常常会遇到根据一个主颜色,然后生成一整个主题色系各种层次颜色的需求,尤其在切换主题、随机展示内容等场景。

恰好找到了一库可以实现此功能,话不多说,我们一起来看看吧。

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

即:一个生成漂亮颜色的简易脚本。

使用方式

安装

bash

 npm install randomcolor

基本使用

javascript

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

每一次执行都返回了一个随机的颜色值

参数说明

  • hue - 控制生成颜色的色调。可以传递表示颜色名称的字符串例如red,yellow等。如果传递十六进制颜色字符串,randomColor 将提取其色相值并使用它来生成颜色。

  • luminosity -- 控制生成颜色的亮度。可以使用:brightlightdark

  • count - 一个整数,指定要生成的颜色数。

  • seed - 一个整数或字符串,传递时将导致 randomColor 每次都返回相同的颜色,这在主题色中可以命名使用,让每次走相同主题名称的时候,返回相同的颜色组。

  • format -- 一个字符串,用于指定生成的颜色的格式。可能的值为rgb,rgba,rgbArray,hsl,hsla , hslArray, hex, 默认为 hex

  • alpha -- 介于 0 和 1 之间的小数,默认为随机值。

场景实例代码

javascript

 randomColor({
  hue:"yellow",
  luminosity:"dark",
  count:10,
  seed:"test",
  format:"hex",
  alpha:0.5
})

我们可以得到以下结果

该代码生成了 10 个黄色相关暗色主题的颜色

总结

randomColor 是一个非常轻量化的色值生成器,代码也极其简单,总共 5kb 左右。

功能也非常直接实用,希望能对大家的场景有所帮助。

-- 欢迎点赞、关注、转发、收藏【我码玄黄】,各大平台同名。


赞(6)
未经允许不得转载:工具盒子 » 手残党福音,一键生成随机颜色:randomColor