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

Question

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

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

我得到这个代码来生成随机颜色.我试图编辑只A获得F字符串但没有成功:

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

非常感谢你提前.

Answer 1

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

hue

其中saturation是在范围0-360度没有单位标记,并且两个lightness和%与尾部百分比100%标志.

注意

• 所有"明亮"颜色的饱和度值均为100%,亮度值为50%:

  色调0 - > < - 色调360

• 所有颜色都与白色混合 - 随着亮度的增加变得更加"柔和" .无论色调和饱和度的值是多少,亮度值100%都会产生白色.

• 当饱和度降低时,所有颜色都与灰色混合,并且根据饱和度的降低程度变得更加"米色"或"灰色".

• 随着亮度的降低,所有颜色都与黑色混合.无论色调和饱和度值是多少,亮度值0%都会产生黑色.

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

hsl( hue, saturation%, lightness%)

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>