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

Question

我正在构建一个简单的网站，当我点击一个按钮时会给出一个随机引用，然后，背景颜色会发生变化。问题是，有时候背景颜色太深而且字体是黑色的，因此人无法阅读报价。

我的问题是，是否有任何方法可以使用鲜艳的颜色或柔和的颜色来创建随机颜色代码？

我得到了这段代码来生成随机颜色。我尝试编辑只获取A到F字符串，但没有成功：

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

非常感谢你。

Answer 1

使用HSL颜色可能是最简单的。 HSL颜色值在CSS中指定为

hsl( hue, saturation%, lightness%)

其中hue的范围为0-360度，没有单位标记，saturation和lightness都是百分比，后跟%。

请注意

• 所有“明亮”颜色的饱和度值均为100％，亮度值为50％：

  色调0 - ＆gt; ＆lt; - hue 360​​

• 所有颜色都与白色混合 - 随着亮度的增加而变得更“柔和”。无论色调和饱和度的值是多少，亮度值100％都会产生白色。

• 当饱和度减少时，所有颜色都会与灰色混合，并且会变得更“灰色”或“灰色”，具体取决于饱和度有多低。

• 当亮度减少时，所有颜色都会与黑色混合。无论色调和饱和度值是多少，亮度值为0％都会产生黑色。

作为一个示例，将身体背景设置为随机柔和颜色，饱和度范围为25-95％，亮度范围为85-95％：

var cssHSL = "hsl(" + 360 * Math.random() + ',' +
                 (25 + 70 * Math.random()) + '%,' + 
                 (85 + 10 * Math.random()) + '%)';

document.body.style.backgroundColor = cssHSL;

Answer 2

通过仅对色调进行随机化，速度会更快。

HSLA颜色由 色相，饱和度，亮度和Alpha组成。

例如，亮度可以根据需要进行调整（第三值）。

function randomHSL(){
    return "hsla(" + ~~(360 * Math.random()) + "," +
                    "70%,"+
                    "80%,1)"
  }

rdm.onclick = (function(){
   document.body.style.backgroundColor = randomHSL()
})
rdm.click()

<button id="rdm">Random pastel color!</button>

或相似之处：

function randomHSL(){
    return `hsla(${~~(360 * Math.random())},70%,70%,0.8)`
  }

rdm.onclick = (function(){
   document.body.style.backgroundColor = randomHSL()
})
rdm.click()

<button id="rdm">Random pastel color!</button>

Answer 3

您可以通过使用rgb适当设置背景颜色属性来选择较浅的颜色。
rgb（0,0,0）为黑色，而rgb（255,255,255）为白色。因此，您可以使用更接近（但不高于）255的随机值 一个例子（使用JQuery）：

 var rand = Math.floor(Math.random() * 10);
 var colorQ = "rgb(" + (215 - rand * 3) + "," + (185 - rand * 5) + "," + (185 - rand * 10) + " )"; 
 $("body").css("background-color", colorQ);

您可以使用这些值，直到找到您喜欢的颜色为止 - 请记住，3 rgb值越接近，颜色越接近灰色。例如。 rgb（100,100,100），rgb（221,221,221）和rgb（133,133,133）都是灰色阴影。你的灰色会有多么轻微的变化。

Answer 4

使用上面的一些解决方案，以及this one to generate a color from a string

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

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");

https://jsfiddle.net/jovistruck/x6j3agen