How to create an array of HTML colors with a certain gradient distribution?

Question

JavaScript. I have an array of numbers var values = [1,20,12,6,9];

I need to create a new array of the same size such that:

1. the element corresponding to the maximum element in the first array is ALWAYS "#3E296B"
2. the element corresponding to the minimum element of the first array is ALWAYS "#FFFFFF".
3. other elements should get gradient colors of "#3E296B" segueing into "#FFFFFF" proportionately to their values

i.e. my new array should be approximately like: var colors = [white, blue, less_blue, less_less_blue, less_blue] (I wrote in words to simplify)

Answer 1

Here is a library that solves this exact problem:

https://github.com/anomal/RainbowVis-JS

So after including it you would do something like:

var rainbow = new Rainbow();
rainbow.setSpectrum('#ffffff', '#3E296B');
rainbow.setNumberRange(1, 20); 
rainbow.colourAt(number); // based on the numbers from your array, this would return the color you want