js实现随机颜色

生成随机颜色的方法

使用十六进制格式

function getRandomHexColor() {
  return `#${Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, '0')}`;
}

该方法生成一个6位十六进制颜色代码，0xFFFFFF表示最大颜色值，padStart确保不足6位时补零。

使用RGB格式

function getRandomRGBColor() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgb(${r}, ${g}, ${b})`;
}

通过随机生成0-255之间的R、G、B分量值组合成RGB颜色字符串。

使用HSL格式

function getRandomHSLColor() {
  const h = Math.floor(Math.random() * 360);
  const s = Math.floor(Math.random() * 100);
  const l = Math.floor(Math.random() * 100);
  return `hsl(${h}, ${s}%, ${l}%)`;
}

HSL格式中色相（H）范围为0-359，饱和度（S）和亮度（L）为0-100百分比值。

使用RGBA格式（带透明度）

function getRandomRGBAColor() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  const a = Math.random().toFixed(2);
  return `rgba(${r}, ${g}, ${b}, ${a})`;
}

在RGB基础上增加透明度（A）通道，值为0-1之间的小数。

注意事项

• 十六进制方法可能出现小概率短代码情况，建议始终使用padStart补零
• RGB/RGBA的数值范围是0-255，超出会导致无效颜色
• 颜色随机性取决于Math.random()的随机程度
• 实际应用中可根据需要添加参数控制颜色范围或亮度