如何在Javascript中生成随机的粉彩（或更亮的）颜色？

我正在建立一个简单的网站，当我点击一个按钮时，它会给出一个随机的引用，随着这个按钮，背景颜色会发生变化。问题是，有时背景颜色太暗，字体是黑色的，因此人们无法阅读引文

---

我的问题: 有没有办法只使用明亮的颜色或柔和的颜色来创建随机的颜色代码

---

我得到了生成随机颜色的代码。我试图编辑以仅获取

A

到

F

字符串，但没有成功：

'#'+((1<<24)*(Math.random()+1)|0).toString(16).substr(1)

---

“#”+（（1您可以通过使用rgb适当设置背景色属性，从较浅的颜色中进行选择。

rgb（0,0,0）为黑色，而rgb（255255）为白色。因此，您可以使用接近（但不高于）255的随机值。

例如（使用JQuery）：

您可以反复使用这些值，直到找到您喜欢的颜色-请记住，3个rgb值之间的距离越近，您的颜色就越接近灰色。例如，rgb（100100100）、rgb（22122122121）和rgb（13313133）都是灰色的阴影。变化的是灰色的亮度。
HSL Colors
使用颜色可能是最简单的。HSL颜色值在CSS中指定为

hsl( hue, saturation%, lightness%)

其中，
色调
在0-360范围内（使用度时没有单位标记），
饱和度
和
亮度
都是带有尾随符号的百分比

注意


“明亮”颜色是指RGB色轮的颜色，从红色开始，然后将纯红色混合成绿色，将纯绿色混合成蓝色，最后将纯蓝色重新混合成红色


在HSL颜色空间中，明亮的颜色根据其在色轮上的位置用色调表示，饱和度为
100%
，亮度值为
50%
：

色调
0
▶  ◀ 色调
360


饱和度：
100%


亮度：
50%




颜色与白色混合-当亮度增加到
50%
以上时，颜色会变得更加“柔和”。亮度值
100%
会创建白色，而不管色调和饱和度的值是什么


随着饱和度的降低，颜色会与灰色混合，并随着饱和度的降低而变得更加褪色。饱和度值
0%
仅根据亮度创建灰度色调


当亮度降低到
50%
以下时，颜色与黑色混合。亮度值
0%
将创建黑色，无论色调和饱和度值是什么



警告

人眼对蓝色最不敏感。与其他颜色相比，蓝色背景上的黑色文本（或蓝色超过黑色）更难阅读。如果这成为随机颜色选择的问题，示例2显示了一种补偿方法。


示例1：在
25-95%
范围内具有饱和度的一些随机彩色粉彩，在
85-95%
范围内具有亮度的一些随机彩色粉彩：


函数getColor（）{code>
返回“hsl（“+360*Math.random（）+”，”+
（25+70*Math.random（））+'%，'+
（85+10*Math.random（））+“%”
}
//生成20种颜色
对于（变量i=20；i--；）{
var item=document.createElement（'div'）
item.style.cssText=`
显示：内联块；
填料：2米；
保证金：5px；
边界半径：50%；
背景：${getColor（）}；
`
文件.正文.附件（项）；
}

只随机选择色调，速度更快

颜色由色调、饱和度、亮度和alpha组成。

例如，根据需要调整亮度（第三个值）

函数randomHSL（）{
返回“hsla（“+~~（360*Math.random（））+”，”+
"70%,"+
"80%,1)"
}
rdm.onclick=（函数（）{
document.body.style.backgroundColor=randomHSL（）
})
rdm.click（）

---

随机粉彩！

使用上面的一些解决方案，以及

下面是一种为给定字符串生成柔和（明亮）颜色的方法

function getBrightColor(hash){ 
    return `hsla(${~~(360 * hash)},70%,70%,0.8)`
}

var stringToBrightColour = function(str) {
    var hash = 0;
    for (var i = 0; i < str.length; i++) {
        hash = str.charCodeAt(i) + ((hash << 5) - hash);
    }
    var brightColor= getBrightColor(hash);
    return brightColor;
}

document.body.style.backgroundColor = stringToBrightColour("the color from this string");

函数getBrightColor（哈希）{
返回'hsla（${~~（360*hash）}，70%，70%，0.8）`
}
变量StringToBrightColor=函数（str）{
var散列=0；
对于（变量i=0；ihash=str.charCodeAt（i）+（hash使用
hsl（）
color并在找到最佳饱和度和亮度值后随机化色调，我猜，
“#”+）（（1多么令人惊讶的答案，谢谢你，先生！哇，这个解释让我大吃一惊，非常感谢。
function getBrightColor(hash){ 
    return `hsla(${~~(360 * hash)},70%,70%,0.8)`
}

var stringToBrightColour = function(str) {
    var hash = 0;
    for (var i = 0; i < str.length; i++) {
        hash = str.charCodeAt(i) + ((hash << 5) - hash);
    }
    var brightColor= getBrightColor(hash);
    return brightColor;
}

document.body.style.backgroundColor = stringToBrightColour("the color from this string");