使用色彩分明的颜色。

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

Distinct-colors是高度可配置的:

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

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

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

'#'+(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);
}

使用色彩分明的颜色。

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

Distinct-colors是高度可配置的:

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

我怀疑还有什么能比这条更快或更短:

"#" + ((1 << 24) * Math.random() | 0).toString(16).padStart(6, "0")

挑战!

一个简短的答案，有精确大小的填充:

'#' + ((1<<24)*(Math.random()+1)|0).toString(16).substr(1)

var color = "#";
for (k = 0; k < 3; k++) {
    color += ("0" + (Math.random()*256|0).toString(16)).substr(-2);
}

它是如何工作的:

Math.random()*256获取一个从0到256(包括0到255)的随机(浮点数)数字 示例结果:116.15200161933899

加上|0就把小数点后的数都去掉了。 例:116.15200161933899 -> 116

使用. tostring(16)将此数字转换为十六进制(以16为基数)。 例:116 -> 74 另一个例子:228 -> e4

加上“0”，它就变成了零。这在我们获取子字符串时很重要，因为我们的最终结果每种颜色必须有两个字符。 例:74 -> 074 另一个例子:8 -> 08

.substr(-2)只获取最后两个字符。 例:074 -> 74 另一个例子:08 -> 08(如果我们没有添加“0”，这将产生“8”而不是“08”)

for循环运行此循环三次，将每个结果添加到颜色字符串中，产生如下内容: # 7408 e4