javascript - 如何使用javascript获得随机颜色(仅限深色)？

Question

我需要一个仅返回深色的函数。

我可以使用下面的代码获得随机颜色。但如何限制它只获取深色。

document.getElementById('mydiv').style.backgroundColor = '#' + Math.floor(Math.random() * 16777215).toString(16);

div {
  height: 100px;
  width: 100%;
}

<div id="mydiv"></div>

如果不是，我如何在数组中定义一些颜色池并从中获取？

Answer 1

在我看来，更简单的是使用 HSL 颜色系统(色相、饱和度、光)

示例代码:

const mydiv = document.getElementById('mydiv')

document.querySelector('button').onclick=_=>
  {
  let colorH = Math.floor(Math.random() *359)
    , colorS = Math.floor(Math.random() *40) +60
    , colorL = Math.floor(Math.random() *15) +7  // dark colors to adjust
    ;
  mydiv.style.setProperty('--colorBG', `hsl(${colorH}, ${colorS}%, ${colorL}%)`)
  }

#mydiv {
  --colorBG: hsl(0, 100%, 15%);  /* 0..359 */
  display: block;
  height: 100px;
  width:100px;
  background-color: var(--colorBG);
  }
* {margin: 1em;}

<div id="mydiv"> </div>

<button>Random color</button>