Question

为条形图/直方图选择随机颜色的最佳方法是什么，以使每种颜色与另一种颜色不同......并且可能形成对比

最受关注的方式是

'#'+(Math.random()*0xFFFFFF<<0).toString(16);

但这可以产生类似的颜色..有时候区分它们可能是一个问题.. 例 enter image description here

Answer 1

我会使用HSV（色调，饱和度，值）而不是RGB来生成颜色。在HSV中，颜色由色调定义，范围为0-360。因此，如果你想要，例如6种不同的颜色，您可以将360除以5（因为我们想要包含0）并获取72，因此每种颜色都应增加72 {1}}。使用this one之类的函数将生成的HSV颜色转换为RGB。

以下函数返回RGB格式的total种不同颜色的数组。请注意，在此示例中颜色不会是“随机”，因为它们总是从红色到粉红色。

function randomColors(total)
{
    var i = 360 / (total - 1); // distribute the colors evenly on the hue range
    var r = []; // hold the generated colors
    for (var x=0; x<total; x++)
    {
        r.push(hsvToRgb(i * x, 100, 100)); // you can also alternate the saturation and value for even more contrast between the colors
    }
    return r;
}

Answer 2

最好的方法是从HSV values转换。您可以将“Hue”的最大值除以所需的颜色数量，然后按此结果递增。

为了提高对比度，您还可以在高亮度和低亮度值之间切换。

Answer 3

现有的答案提到颜色的色调，饱和度，颜色代表非常优雅，更接近人类感知颜色的方式，并且最好遵循他们的建议。同时创建一个长的预先计算的颜色列表并根据需要选择它们的子集是快速和可靠的。

但是，这里有一些代码可以直接回答你的问题：它会生成RGB中随机颜色不同的颜色。我可以看到这种技术有两个缺点。首先，这些颜色是非常随机的，看起来有点粗糙，其次可能需要一段时间才能使代码偶然发现有效的颜色，这取决于你需要颜色的“相距甚远”。

function hex2rgb(h) {
    return [(h & (255 << 16)) >> 16, (h & (255 << 8)) >> 8, h & 255];
}
function distance(a, b) {
    var d = [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
    return Math.sqrt((d[0]*d[0]) + (d[1]*d[1]) + (d[2]*d[2]));
}
function freshColor(sofar, d) {
    var n, ok;
    while(true) {
        ok = true;
        n = Math.random()*0xFFFFFF<<0;
        for(var c in sofar) {
            if(distance(hex2rgb(sofar[c]), hex2rgb(n)) < d) {
                ok = false;
                break;
            }
        }
        if(ok) { return n; }
    }
}
function getColors(n, d) {
    var a = [];
    for(; n > 0; n--) {
        a.push(freshColor(a, d));
    }
    return a;
}

颜色之间的距离是由R，G和B分量测量的Euclidean distance。因此，两种颜色（黑色和白色）可以最远的是大约441.67。

要使用此代码，请调用getColors，其中第一个参数是颜色数，第二个参数是其中任意两个之间的最小距离。它将返回一个数字RGB值数组。

Answer 4

'#'+(Math.random()*0xFFFFFF<<0).toString(16);

不是最好的使用方法，因为它可以生成像#4567这样的值，它缺少两位而不是生成＃004567

最好单独挑选每个角色，如：

'#'+Math.floor(Math.random()*16).toString(16)+
    Math.floor(Math.random()*16).toString(16)+
    Math.floor(Math.random()*16).toString(16)+
    Math.floor(Math.random()*16).toString(16)+
    Math.floor(Math.random()*16).toString(16)+
    Math.floor(Math.random()*16).toString(16);

但是，由于可以缩短十六进制颜色，因此很容易将其缩小为三个数字。 IE浏览器。 #457 == #445577

然后，如果你想减少可能性的数量并扩大它们之间的差距，你可以使用：

'#'+(5*Math.floor(Math.random()*4)).toString(16)+
    (5*Math.floor(Math.random()*4)).toString(16)+
    (5*Math.floor(Math.random()*4)).toString(16);

将每种颜色的选择数除以5，然后平均分配均匀分布。

Answer 5

我喜欢用hsl值来指定颜色。

所以

"color: hsl(" + getRandomArbitary(0, 360) + ", 50%, 50%)";

会给你随机的结果，但这不会给你明确的分色。所以我将它基于循环的i值。像，

for (var i = 0; i < whateverYourValue; i += 1) {
    color = "color: hsl(" + i * 10 + ", 50%, 50%)";

    // set your colour on whatever
}

显然上面的内容是指示性的，而且不是有效的代码。

想了解有关hsl的更多信息？检查http://mothereffinghsl.com/'因为，这很有趣。

Answer 6

我认为kbok和Harpyon关于在HSV色彩空间中工作的内容，this little library使得在RGB和HSV之间切换变得非常容易 - 以及其他人。

使用javascript创建独特的颜色

6 个答案: