【Javascript随机颜色生成器 - randomColor】

在我们进行web开发时，经常会需要一些随机生成颜色的需求，例如给不同的元素随机赋予不同的背景色，或者随机生成一些色块进行配色等等。这时候，一个好用的Javascript随机颜色生成器可以解决我们的燃眉之急。

在众多Javascript随机颜色生成器中，randomColor.js是目前比较流行和实用的一款。

简介

randomColor是由David Merfield编写的Javascript随机颜色生成器库。它可以生成任意数量、任意亮度、任意饱和度的随机色彩，可以用于web开发、设计等领域。

安装

您可以直接在randomColor官方GitHub页面下载源码，也可以使用npm进行安装。

安装方式如下：

npm install randomcolor

使用

在使用之前，请确保您已经成功安装了randomColor库。使用也非常简单，只需引入库文件，然后调用函数即可。

// 引入randomColor库文件
import randomColor from 'randomcolor';

// 生成一个随机颜色
let color = randomColor();
console.log(color); // 输出随机的颜色值

使用示例

下面我们来演示一下randomColor生成随机颜色的用法。

1. 随机生成背景色

我们可以使用它快速地生成背景色，这里以React为例：

import React from "react";
import randomColor from "randomcolor";

export default function App() {
  const colors = [...Array(20)].map(() => randomColor()); // 生成20个随机颜色
  return (
    <div>
      {colors.map((color, index) => (
        <div
          key={index}
          style={{
            backgroundColor: color,
            height: "100px",
            width: "100%",
            margin: "10px 0px"
          }}
        ></div>
      ))}
    </div>
  );
}

效果图如下：

2. 随机生成颜色块

我们可以使用randomColor来帮助我们生成一组能够协调的颜色块，这里以Vue为例：

<template>
  <div class="color-box">
    <div class="color" v-for="(color, index) in colors" :style="{ backgroundColor: color }" :key="index"></div>
  </div>
</template>

<script>
import randomColor from "randomcolor";

export default {
  data() {
    return {
      colors: []
    };
  },
  methods: {
    createColors() {
      const colors = randomColor({ count: 6, hue: "random" }); // 随机生成6个颜色
      this.colors = colors;
    }
  },
  created() {
    this.createColors();
  }
};
</script>

<style scoped>
.color-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.color {
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

效果图如下：

API

randomColor提供了多个参数，让您可以控制生成的随机颜色。

• hue (string|array)：色调 (Accepted strings: red, orange, yellow, green, blue, purple, pink and monochrome; Accepted array values: ['red', 'orange'])
• luminosity (string)：亮度 (Accepted strings: bright, light, dark; random)
• count (number)：生成颜色个数
• seed (string)：使用特定seed生成颜色 (只有当count大于1时生效)
• format (string)：输出颜色的格式 (Accepted values: rgb, rgba, hsl, hsla, hex)

更多参数详见randomColor官方文档。

总结

随机颜色生成器可以提供一些有趣的玩法我们今天介绍的randomColor，不仅支持多种参数定制，同时也非常容易上手。希望本文对您有所帮助。