September 2, 2024 BY
IN Blog , Programming

Here is some code that will help you create all the RGB values needed for generating a RGB Rainbow gradient. The code steps through 6 sets of transitions from one color to another in 256 steps each .

  • Red to Yellow
  • Yellow to Green
  • Green to Cyan
  • Cyan to Blue
  • Blue to Magenta
  • Magenta back to Red

With 6 transitions, each in 256 steps provides 1536 total colors and here is the result from the code below:

See it in action here:  https://codepen.io/alijani/pen/zYVmzqR


html file:

<canvas id="myCanvas" width="1536" height="200"></canvas>

Js File:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

var x;
for (x=0; x<1536; x++) {          // 6*256
  ctx.fillStyle =  rainbow(x);
  ctx.fillRect(x, 0, x, 200);  
}


// Accepts values 0 through 1535 and returns the one of 1536 colors in rainbow.
function rainbow(x) {   
    let r = Math.trunc(x / 256);    // 0-5     
    let c = x % 256; 
   
    if (r==0) {
      value = rgb(255,c,0);        // red to yellow transition
    } else if (r==1) {
      value = rgb(255-c,255,0);    // yellow to green transition
    } else if (r==2) {
      value = rgb(0,255,c);        // green to cyan transition
    } else if (r==3) {
      value = rgb(0,255-c,255);    // cyan to blue transition
    } else if (r==4) {
      value = rgb(c,0,255);        // blue to magenta transition
    } else if (r==5) {
      value = rgb(255,0,255-c);    // Magenta to ren transision
    }
    return value;     
}

// simple function to convert rgb decimal values to #RRGGBB hex color string used in html
function rgb(r,g,b) {
  return "#"+(r).toString(16).padStart(2,'0')+(g).toString(16).padStart(2,'0')+(b).toString(16).padStart(2,'0');
}