map

总是返回一个有效的RGB颜色:

`rgb(${[1,2,3].map(x=>Math.random()*256|0)})`

让c =“rgb ($ {[1, 2, 3] . map (x = > math . random() * 256 | 0)})” console.log (c); document.body.style.background = c

map

总是返回一个有效的RGB颜色:

`rgb(${[1,2,3].map(x=>Math.random()*256|0)})`

让c =“rgb ($ {[1, 2, 3] . map (x = > math . random() * 256 | 0)})” console.log (c); document.body.style.background = c

许多答案调用Math.random()的次数比必需的要多。或者他们希望这个数字的十六进制表示，有六个字符。

首先将随机浮点数乘以范围[0,0xffffff + 1)。现在我们的数字有了0xRRRRRR的形式和一些变化，这是一个有24位有效位的数字。一次读取4位，并使用该随机数[0,15]并在查找时将其转换为匹配的十六进制字符。

function randomColor() {
    var lookup = "0123456789abcdef";
    var seed = Math.random() * 0x1000000;
    return (
        "#" +
        lookup[(seed & 0xf00000) >> 20] +
        lookup[(seed & 0x0f0000) >> 16] +
        lookup[(seed & 0x00f000) >> 12] +
        lookup[(seed & 0x000f00) >> 8] +
        lookup[(seed & 0x0000f0) >> 4] +
        lookup[seed & 0x00000f]
    );
};

我已经生成了100种不同对比度的不同颜色，你可以根据需要增加数值:

Feedle举例:http://jsfiddle.net/zFbfE/29/ -

// CHANGE THE INITIAL SEED HERE
Math.seed = 23;

/**
 * Math.seededRandom()
 *
 */
Math.seededRandom = function(max, min) {
    max = max || 1;
    min = min || 0;

    Math.seed = (Math.seed * 9301 + 49297) % 233280;
    var rnd = Math.seed / 233280.0;

    return min + rnd * (max - min);
}

var c, r = 0,
    l = 100000,
    t,
    random = [],
    seededRandom = [];

for(var i=0; i<100; i++)
{
    random[i] = 0;
    seededRandom[i] = 0;
}

// Do some loops withouth benchmarking
// to have a "fair" comparison
/*for (c = 0; c < l; ++c) {
    r = 5+5;
}*/


// benchmark Math.random()
t = new Date().getTime();
s = '';


// benchmark Math.seededRandom()
t = new Date().getTime();
while(l--){
    r = Math.seededRandom();
    seededRandom[(r*100)|0] += 1;
}

var inc = 0;
for(c=0; c<seededRandom.length; c++) {
    //var inc=15;
    for(var i=0; i<seededRandom.length; i++)
    {
        if(i!==c) {
            if(seededRandom[c] == seededRandom[i]) {
            seededRandom[c] += inc;
            inc = inc + 10;
              //    console.log(seededRandom[c]);
            }
        }
    }
    inc = inc > 255 ? 0 : inc;
}

var a=[], b=[], d=[], inc=0, dec=255;
for(c=0; c<seededRandom.length; c++) {
    a[c] = (seededRandom[c] % 100) + inc;
    b[c] = dec - Math.floor(seededRandom[c]/100);
    if(b[c] < 0)
        b[c] = b[c]* - 1;
    if(a[c] > 255)
        a[c] -= 255;
    d[c] = Math.floor(b[c]/2);
    inc += 5;
    dec -= 5;
}


var app = angular.module("myAppp", []).controller('myCtrl',function($scope, $http) {
$scope.id = [];
for(var i=0; i<seededRandom.length; i++)
    $scope.id.push(i);

// Generate random number
$scope.Icon = [];$scope.Icon2 = [], $scope.Icon3 = [];

var ran = 0, inc = 5, dec = 255;
for(var i=0;i<seededRandom.length;i++)
{
    $scope.Icon.push(a[i]%100);
    $scope.Icon2.push(b[i]%100);
    $scope.Icon3.push(d[i]%100);
    console.log(a[i] + "|" + b[i] + "|" + d[i]);
}

});

它对我有用，我想它对你也会有帮助。

这个例子中最好的一点是，它将生成100个随机颜色，并且每个页面加载的颜色都是相同的。

有多种方法来创建随机十六进制颜色代码在博客文章中随机十六进制颜色代码生成器在JavaScript。当随机值小于0×100000时，你需要用0填充，所以下面是正确的版本:

var randomColor = "#000000".replace(/0/g,function(){return (~~(Math.random()*16)).toString(16);});

这将用一个随机的十六进制数字替换六个0中的每一个，因此它一定会得到一个完整的六位数有效颜色值。

这个函数在两个方面超越了其他答案:

它试图生成尽可能不同的颜色 20种颜色中哪一种与欧几里得距离最远 其他的都在HSV锥内。

它允许你限制色调， 饱和度，或值范围，但它仍然试图选择颜色作为 在这个范围内尽可能的不同。

它不是超级高效，但对于合理的值(谁甚至可以轻松地区分100种颜色?)够快了。

请参阅 JSFiddle

  /**
   * Generates a random palette of HSV colors.  Attempts to pick colors
   * that are as distinct as possible within the desired HSV range.
   *
   * @param {number}    [options.numColors=10] - the number of colors to generate
   * @param {number[]}  [options.hRange=[0,1]] - the maximum range for generated hue
   * @param {number[]}  [options.sRange=[0,1]] - the maximum range for generated saturation
   * @param {number[]}  [options.vRange=[0,1]] - the maximum range for generated value
   * @param {number[][]}[options.exclude=[[0,0,0],[0,0,1]]] - colors to exclude
   *
   * @returns {number[][]} an array of HSV colors (each HSV color
   * is a [hue, saturation, value] array)
   */
  function randomHSVPalette(options) {
    function random(min, max) {
      return min + Math.random() * (max - min);
    }

    function HSVtoXYZ(hsv) {
      var h = hsv[0];
      var s = hsv[1];
      var v = hsv[2];
      var angle = h * Math.PI * 2;
      return [Math.sin(angle) * s * v,
              Math.cos(angle) * s * v,
              v];
    }

    function distSq(a, b) {
      var dx = a[0] - b[0];
      var dy = a[1] - b[1];
      var dz = a[2] - b[2];
      return dx * dx + dy * dy + dz * dz;
    }

    if (!options) {
      options = {};
    }

    var numColors = options.numColors || 10;
    var hRange = options.hRange || [0, 1];
    var sRange = options.sRange || [0, 1];
    var vRange = options.vRange || [0, 1];
    var exclude = options.exclude || [[0, 0, 0], [0, 0, 1]];

    var points = exclude.map(HSVtoXYZ);
    var result = [];

    while (result.length < numColors) {
      var bestHSV;
      var bestXYZ;
      var bestDist = 0;
      for (var i = 0; i < 20; i++) {
        var hsv = [random(hRange[0], hRange[1]), random(sRange[0], sRange[1]), random(vRange[0], vRange[1])];
        var xyz = HSVtoXYZ(hsv);
        var minDist = 10;
        points.forEach(function(point) {
          minDist = Math.min(minDist, distSq(xyz, point));
        });
        if (minDist > bestDist) {
          bestHSV = hsv;
          bestXYZ = xyz;
          bestDist = minDist;
        }
      }
      points.push(bestXYZ);
      result.push(bestHSV);
    }

    return result;
  }

  function HSVtoRGB(hsv) {
    var h = hsv[0];
    var s = hsv[1];
    var v = hsv[2];

    var i = ~~(h * 6);
    var f = h * 6 - i;
    var p = v * (1 - s);
    var q = v * (1 - f * s);
    var t = v * (1 - (1 - f) * s);
    v = ~~(255 * v);
    p = ~~(255 * p);
    q = ~~(255 * q);
    t = ~~(255 * t);
    switch (i % 6) {
      case 0: return [v, t, p];
      case 1: return [q, v, p];
      case 2: return [p, v, t];
      case 3: return [p, q, v];
      case 4: return [t, p, v];
      case 5: return [v, p, q];
    }
  }

  function RGBtoCSS(rgb) {
    var r = rgb[0];
    var g = rgb[1];
    var b = rgb[2];
    var rgb = (r << 16) + (g << 8) + b;
    return '#' + ('000000' + rgb.toString(16)).slice(-6);
  }