Generate a n-color rainbow palette

Question

I'm trying to generate a rainbow with 15 different colors with (runnable code here):

size(360,100);
colorMode(HSB, 360, 100, 100); // Hue in degrees in [0, 360],
                               // saturation/brightness in [0, 100]
                               // like in Photoshop
noStroke();

for (int i = 0; i < 15; i++)   
{
    fill(i*24, 100, 100);      // 24*15 = 360
    rect(i*24, 0, 25, 100);
}

but it doesn't produce a rich 15 rainbow-color palette, instead some colors are missing (vivid yellow for example).

Is there a well known algorithm to produce a vivid rainbow color palette?

Answer 1

To understand what's going on, try creating a program that shows a line for each value 0-360:

size(360,100);
colorMode(HSB, 360, 100, 100);                                         
noStroke();
for (int i = 0; i < 360; i++)   
{
    fill(i, 100, 100);
    rect(i, 0, 1, 100);
}

You'll see this:

Notice that the "vivid yellow" band is much more narrow than, for example, the green or blue bands. That's why simply sampling every X values doesn't generate a yellow color.

The yellow color is around value 60, so you could modify your increment so it lands on 60. Drawing 12 rectangles with a width of 30 lets you land on the yellow:

size(360,100);
colorMode(HSB, 360, 100, 100);                                         
noStroke();
for (int i = 0; i < 360; i++)   
{
    fill(i*30, 100, 100);
    rect(i*30, 0, 30, 100);
}

Or you could come up with the values you want ahead of time and put them in an array instead of using an even distribution:

int[] hueValues = {0, 15, 30, 60, 90, 120, 150, 180, 210, 225, 240, 270, 300, 330, 360};

size(360,100);
colorMode(HSB, 360, 100, 100);                                         
noStroke();
for (int index = 0; index < hueValues.length; index++)   
{
    float rectWidth = width/hueValues.length;
    fill(hueValues[index], 100, 100);
    rect(index*rectWidth, 0, rectWidth, height);
}