颜色是在线和离线设计的一个重要部分。网页上的几乎所有元素都有一些颜色。有很多网站都是围绕着随机或从源色中创建渐变和色板而建立的。
在本教程中，我们将向你展示如何在JavaScript中生成一个随机颜色。也许你会发现，在开发一个让用户创建时尚海报或表格元素的网站时，随机颜色生成器会很有用
了解基本概念
颜色可以用很多格式表示，如RGB、十六进制或HSL符号等。我们将用这三种符号生成一个随机颜色。生成一个随机颜色只是一个生成随机数的问题。
幸运的是，JavaScript确实有一个Math.random() 函数，我们可以用它来生成这些随机数。它将给你一个随机的浮点伪随机数，它将大于或等于0，小于1，分布基本均匀。这对我们的用例来说已经足够好了。
我们将在特定范围内生成随机数，如0到100或0到255。基本上，我们想从随机数生成器中得到的最小值是0，最大值可以是我们想要的任何值，如100或255。
任何数字与0相乘都会得到一个0，与1相乘会得到相同的数字。因此，将我们想要的最大值，例如255，与0和1之间的任何数字相乘，将得到一个0和255之间的数字。然而，由于Math.random() ，我们将不得不使用一些其他技巧来获得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、16进制和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]
*/
随机颜色生成器
这里有一个CodePen的例子，说明随机颜色生成功能的作用
最后的思考
这个快速提示向你展示了如何在JavaScript中以三种常见格式生成随机颜色。RGB、十六进制和HSL。如果你想有透明的颜色，你可以使用同样的技术来随机化你的颜色的不透明度。
