'#'+Math.random().toString(16).slice(-3) // three-numbers format aka #f3c
'#'+Math.random().toString(16).slice(-6) // six-number format aka #abc123

你应该使用'#'+Math.floor(Math.random()*16777215).toString(16);对于一个随机的颜色代码。

你的想法，但为什么是16777215?检查本文:用一行JavaScript代码生成一种随机颜色

generateRandomColor()函数 ｛ var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16); 如果(randomColor。length != 7){//在任何情况下，颜色代码都是无效的 randomColor = generateRandomColor(); ｝ 返回randomColor; //随机的颜色将是新鲜的 ｝ document.body.style.backgroundColor = generateRandomColor() // -> #E1AC94

我的版本:

function RandomColor() {
  var hex = (Math.round(Math.random()*0xffffff)).toString(16);
  while (hex.length < 6) hex = "0" + hex;
  return hex;
}

Use:

function random_color(format)
{
    var rint = Math.round(0xffffff * Math.random());
    switch(format)
    {
        case 'hex':
            return ('#0' + rint.toString(16)).replace(/^#0([0-9a-f]{6})$/i, '#$1');
            break;

        case 'rgb':
            return 'rgb(' + (rint >> 16) + ',' + (rint >> 8 & 255) + ',' + (rint & 255) + ')';
            break;

        default:
            return rint;
            break;
    }
}

升级版:

function random_color( format ){
  var rint = Math.floor( 0x100000000 * Math.random());
  switch( format ){
    case 'hex':
      return '#' + ('00000'   + rint.toString(16)).slice(-6).toUpperCase();
    case 'hexa':
      return '#' + ('0000000' + rint.toString(16)).slice(-8).toUpperCase();
    case 'rgb':
      return 'rgb('  + (rint & 255) + ',' + (rint >> 8 & 255) + ',' + (rint >> 16 & 255) + ')';
    case 'rgba':
      return 'rgba(' + (rint & 255) + ',' + (rint >> 8 & 255) + ',' + (rint >> 16 & 255) + ',' + (rint >> 24 & 255)/255 + ')';
    default:
      return rint;
  }
}

var html = '';
var red;
var green;
var blue;
var rgbColor;

for ( var i = 1; i <= 100; i += 1) {
  red = Math.floor(Math.random() * 256 );
  green = Math.floor(Math.random() * 256 );
  blue = Math.floor(Math.random() * 256 );
  rgbColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
  html += '<div style="background-color:' + rgbColor + '"></div>';  
}

document.write(html);

使用色彩分明的颜色。

它生成了一个视觉上不同颜色的调色板。

Distinct-colors是高度可配置的:

选择调色板中有多少种颜色 将色调限制在一个特定的范围内 限制色度(饱和度)到一个特定的范围 将亮度限制在一个特定的范围内 配置调色板的一般质量