how to generate a list of successive colors in javascript

Question

I'm trying to generate a list of "successive" colors for a d3.js heatmap purpose. So, I'm looking for a function that takes in input a starting color (say red in hexadecimal), an ending color (say blue in hexadecimal), and an integer (the number of hexadecimal colors to generate in between that is returned as a form of a list.

build_colors(start_color,end_color,nb_colors) -> list of colors

I do not look for something too sophisticated (like sampling at constant speed on a geodesic between the two color-endpoints on a riemannian perceptual space)!

It may be rather easy but I am beginner with javascript / d3.js and basically all web-technologies.

Possible duplicate of http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript — cl3m, Mar 02 '16 at 16:40

score 3 · Accepted Answer · answered Mar 02 '16 at 16:45

D3 has a built-in color interpolator, actually several. The closest one would probably be f=d3.interpolateHsl(a, b) where aand b are two colors. It returns an interpolation function f taking a parameter between 0 and 1 and returning the corresponding color in the range from a to b.

If you really need an array instead of a function, you can do the following:

var colors=[];
var nColors=20;
for (var i=0; i<nColors; i++)
  colors.push(f(i/(nColors-1)));

score 2 · Answer 2 · answered Mar 02 '16 at 16:59

For calculation purposes, I think it's easier to represent colors as three integers spanning from 0 to 255. CSS color attributes can then be assigned with values of format "rgb(64, 32, 16)".

So, for your build_color(…) function, I think the best is to accept and return colors as arrays of three integers.

Here's an example:

var build_colors = function(start, end, n) {
    
    //Distance between each color
    var steps = [
      (end[0] - start[0]) / n,  
      (end[1] - start[1]) / n,  
      (end[2] - start[2]) / n  
    ];
    
    //Build array of colors
    var colors = [start];
    for(var ii = 0; ii < n - 1; ++ii) {
      colors.push([
        Math.floor(colors[ii][0] + steps[0]),
        Math.floor(colors[ii][1] + steps[1]),
        Math.floor(colors[ii][2] + steps[2])
      ]);
    }
    colors.push(end); 
   
    return colors;
  };
  


  //Example: ten colors between red and blue
  var colors = build_colors([255, 0, 0], [0, 0, 255], 10);  
  
  //Render
  for(var ii = 0; ii < 10; ++ii) {
    var div = document.createElement("div");
    div.setAttribute("style", "background: rgb(" + colors[ii].join(",") + ")");
    document.body.appendChild(div);    
  }

div {
  width: 100px;
  height: 25px;
}

<body>
</body>

@laurent's answer is way better for d3.js users. This is strictly plain vanilla Javascript. — lampyridae, Mar 02 '16 at 17:01

score 1 · Answer 3 · edited May 23 '17 at 12:22

1

Check this question: Javascript color gradient

RainbowVis-JS does exactly what you want: https://github.com/anomal/RainbowVis-JS

edited May 23 '17 at 12:22

Community

1
1

answered Mar 02 '16 at 16:51

Khelmo

364
2
7

how to generate a list of successive colors in javascript

3 Answers3