Building colors for maximum contrast

Question

I want to draw some elements on the screen, each element is in one of N sets. The number of sets changes all the time, so I need to calculate N different colors that are as different as possible (to make it easier to determine what is in which set).

So, for example, with N = 2, my results will be black and white. With three, I think I would get everything red, all green, all blue. For all four, it’s less obvious what the correct answer is, and it is here that I have problems.

EDIT :: The obvious approach is to map 0 to red, from 1 to green and all colors between the corresponding colors of the rainbow, then you can get the color for the set N by doing GetRainbowColour (N / TotalSets), so the GetRainbowColour method is all that is needed for solutions to this problem.

Answer 1

You can read the HSL and HSV color models in this wikipedia article . The “H” in acronyms stands for Hue, and this is the rainbow you want. It looks like you want maximum saturation. The article also explains how to convert to RGB color.

, .

Answer 2

- , , , - , .

, . , , (4:2:2) - , , , - .

, , , , ( , ) 10% , , , . GetRainbowColour , .

Answer 3

, brainjam, HSL. , , , :

var contrastingColors = function(len) {
    var result = [];
    if (len > 0) {
        var h = [0, 180];                       // red, cyan
        var shft = 360 / len;
        var flip = 0;
        var l = 50;
        for (var ix = 0; ix < len; ix++) {
            result.push("hsl(" + h[flip] + ",100%," + l + "%)");
            h[flip] = (h[flip] + shft) % 360;
            flip = flip ? 0 : 1;
            if (flip == 0) {
                l = (l == 50) ? 30 : (l == 30? 70 : 50);
            }
        }
    }
    return result;
};