colorsprocessingrgbcolor-palettehsb

Generate a n-color rainbow palette


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).

enter image description here

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


Solution

  • 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:

    color gradient

    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);
    }
    

    color gradient with yellow

    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);
    }
    

    array color gradient