使用十六进制的随机颜色生成:(#000000 - #FFFFFF)

语法非常简单。我们将十六进制颜色指定为#RRGGBB。我们知道每个十六进制颜色(RR、GG和BB)由8个字节定义。记住，每个字节可以表示256个值。

Rr - 16 * 16(0,1,2,3…F) = 256。GG和BB也类似。

这意味着十六进制颜色系统可以取256(R) × 256(G) × 256(B) = 16,777,216个值。

我们使用Math.random()和Math.floor()来获得一个范围为0到16777215的数字。

Math.floor(Math.random()*16777215)

最后，数字需要转换为以16为基数(十六进制)，我们可以通过使用toString(基数)得到这个。

Math.floor(Math.random()*16777215).toString(16);
//->12ef556
let randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);

我的版本:

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

所以，虽然这里所有的答案都很好，但我想对输出有更多的控制。例如，我想防止任何接近白色的阴影，同时确保我得到明亮的充满活力的颜色，而不是水洗阴影。

function generateColor(ranges) {
            if (!ranges) {
                ranges = [
                    [150,256],
                    [0, 190],
                    [0, 30]
                ];
            }
            var g = function() {
                //select random range and remove
                var range = ranges.splice(Math.floor(Math.random()*ranges.length), 1)[0];
                //pick a random number from within the range
                return Math.floor(Math.random() * (range[1] - range[0])) + range[0];
            }
            return "rgb(" + g() + "," + g() + "," + g() +")";
        };

所以现在我可以指定3个任意范围来选择rgb值。你可以不带参数调用它，得到我的默认设置，它通常会生成一个非常鲜艳的颜色，有明显的主色调，或者你可以提供你自己的范围数组。

我已经生成了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个随机颜色，并且每个页面加载的颜色都是相同的。

有很多方法可以做到这一点。以下是我做的一些:

简短的一行代码，保证有效的颜色

'#'+(Math.random().toString(16)+'00000').slice(2,8)

生成6个随机十六进制数字(0-F)

function randColor() {
    for (var i=0, col=''; i<6; i++) {
        col += (Math.random()*16|0).toString(16);
    }
    return '#'+col;
}

// ES6 one-liner version
[..."000000"].map(()=>Math.random().toString(16)[2]).join("")

生成单独的HEX组件(00-FF)

function randColor2() {
    var r = ('0'+(Math.random()*256|0).toString(16)).slice(-2),
        g = ('0'+(Math.random()*256|0).toString(16)).slice(-2),
        b = ('0'+(Math.random()*256|0).toString(16)).slice(-2);
    return '#' +r+g+b;
}

过度设计的十六进制字符串(XORs 3输出一起形成颜色)

function randColor3() {
    var str = Math.random().toString(16) + Math.random().toString(16),
    sg = str.replace(/0./g,'').match(/.{1,6}/g),
    col = parseInt(sg[0], 16) ^ 
          parseInt(sg[1], 16) ^ 
          parseInt(sg[2], 16);
    return '#' + ("000000" + col.toString(16)).slice(-6);
}

谁能打败它?

'#' + Math.random().toString(16).substr(-6);

它保证一直工作:http://jsbin.com/OjELIfo/2/edit

根据eterps的注释，如果随机颜色的十六进制表示非常短(0.730224609375 => 0.baf)，上面的代码仍然可以生成更短的字符串。

这段代码应该在所有情况下工作:

function makeRandomColor(){
  var c = '';
  while (c.length < 7) {
    c += (Math.random()).toString(16).substr(-6).substr(-1)
  }
  return '#' + c;
}