如何在JavaScript中编写随机颜色生成器

颜色是在线和离线设计的重要组成部分。几乎网页上的所有元素都应用了一些颜色。有整个网站都是围绕随机或从源颜色创建渐变和调色板而构建的。

在本教程中，我将向您展示如何在 javascript 中生成随机颜色。在开发一个让用户创建时尚海报或表单元素的网站时，也许您会发现随机颜色生成器很有用！

如何在JavaScript中编写随机颜色生成器第1张

了解基本概念

颜色可以用多种格式表示，例如 RGB、十六进制或 HSL 表示法。我们将在这三种符号中生成随机颜色。生成随机颜色只是生成随机数的问题。

幸运的是，JavaScript 确实有一个Math.random()函数可以用来生成这些随机数。它将为您提供一个大于或等于 0 且小于 1 的随机浮点伪随机数。分布非常均匀。这对于我们的用例来说已经足够了。

我们将生成特定范围之间的随机数，例如 0 到 100 或 0 到 255。基本上，我们希望从随机数生成器中获得的最小值是 0，最大值可以是我们想要的任何值，例如 100 或 255。

将任何数字乘以 0 将得到 0，将其乘以 1 将返回相同的数字。因此，将我们想要的最大值（例如 255）乘以 0 和 1 之间的任何值，将得到一个介于 0 和 255 之间的数字。但是，由于Math.random()从来没有准确地给我们 1，我们将不得不使用其他技巧来获得 255。这可以通过内部将最大限制增加 1 来完成。

这是此逻辑在 javaScript 中作为函数的实现。

function randomInteger(max) {
    return Math.floor(Math.random()*(max + 1));
}

// Outputs a number between 0 and 255 inclusive
console.log(randomInteger(255));

将一个数字乘以某个随机分数并不总是产生整数值。因此，我们使用该Math.floor()函数从数字中去除小数部分。

生成随机颜色

我们现在将编写代码以创建 RGB、十六进制和 HSL 表示法的随机颜色。

生成 RGB 颜色值

这需要我们创建 0 到 255 之间的三个随机整数。这些值将代表我们颜色的红色、绿色和蓝色分量。之后，我们只需要做一些基本的字符串连接。这是我们在 JavaScript 中生成随机 RGB 颜色值的函数：

function randomRgbColor() {
    let r = randomInteger(255);
    let g = randomInteger(255);
    let b = randomInteger(255);
    return [r,g,b];
}

for(i = 0; i < 5; i++) {
    console.log(randomRGBColor());
}

/* Example output:
[191, 99, 247]
[162, 94, 201]
[236, 241, 172]
[168, 89, 2]
[161, 42, 113]
*/

生成十六进制颜色值

就像前面的示例一样，我们将首先生成一个介于 0 和 255 之间的随机数。之后，我们会将这些数字转换为相应的十六进制值。最后一个简单的字符串连接将为我们提供十六进制格式的随机颜色。

function randomHexColor() {
    let [r,g,b] =randomRgbColor();

    let hr = r.toString(16).padStart(2, '0');
    let hg = g.toString(16).padStart(2, '0');
    let hb = b.toString(16).padStart(2, '0');

    return "#" + hr + hg + hb;
}

for(i = 0; i < 5; i++) {
    console.log(randomHEXColor());
}
/*
#51c18a
#81f582
#8a8446
#0554e1
#a21b18
*/

您可能已经注意到我们也在使用该padStart()功能。这是因为我们生成的随机数在转换为十六进制表示法时有时会用一个数字表示。但是，这种格式的有效颜色需要 3 或 6 个字符。在开头填充 0 将使我们的总字符序列长度为 6。

生成 HSL 颜色值

HSL 表示法中的颜色也由三个数字组成。第一个是角度，决定颜色的色调，第二个值是百分比，决定颜色的饱和度，第三个值用来指定颜色的明度，以百分比表示。色调的范围可以从 0 到 360，而百分比的范围从 0 到 100。

function randomHslColor() {
    let h = positiveInteger(360);
    let s = positiveInteger(100);
    let l = positiveInteger(100);

    return [h,s,l];
}

for(i = 0; i < 5; i++) {
    console.log(randomHslColor());
}

/*
[346, 83, 88]
[178, 43, 7]
[93, 87, 75]
[291, 29, 85]
[43, 53, 78]
*/