Javascript - 生成随机柔和的 HEX/RGBA 颜色答案

【问题标题】：Javascript - Generate Random Pastel HEX/RGBA ColorJavascript - 生成随机柔和的 HEX/RGBA 颜色
【发布时间】：2021-07-27 04:46:25
【问题描述】：

我有以下方法

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（HEX 或 RGBA）中只生成随机的 PASTEL 颜色？

【问题讨论】：

如果 hex 或 rgba 可以，hsl 也可以吗？它与 CSS 一样支持...
@AKX 我正在研究 React Native。不支持。

标签： javascript

【解决方案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>

【讨论】：

【解决方案2】：

React Native seems to support hsl 根据文档。如果这对您有用，那么this 的回答可能会有所帮助。

【讨论】：