Javascript -生成随机柔和十六进制/RGBA颜色

Question

我有以下方法

export const generateRandomColor = () => {
  const letters = "0123456789ABCDEF";
  let color = "#";

  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * letters.length)];
  }

  return color;
};

这会产生随机颜色。我正在使用这个函数来获取我的PieChart的颜色，当然，看到不同类型的颜色(浅色、深色、粉色……)一点也不优雅。好坏参半。

如何在JS (十六进制或RGBA)中只生成随机的粉彩颜色？

Answer 1

要生成像这样的柔和色调的颜色范围，可以生成最小值为127的每条渠道：

​

generatePastelColor = () => {
  let R = Math.floor((Math.random() * 127) + 127);
  let G = Math.floor((Math.random() * 127) + 127);
  let B = Math.floor((Math.random() * 127) + 127);
  
  let rgb = (R << 16) + (G << 8) + B;
  return `#${rgb.toString(16)}`;      
}

document.querySelectorAll('#palette div').forEach( elem => {
  elem.style.backgroundColor = generatePastelColor();
});

#palette {
  width: 100px;
  height: 100px;
}

#palette > div {
  width: 100%;
  height: 20px;
}

<div id="palette">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

​

Answer 2

根据文档对原生seems to support hsl进行反应。如果这对你有效，那么this answer可能会有一些帮助。