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)

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)

• javascript
• arrays
• color-codes

• @Rick Visi I tried to concatenate the RGB values. I got stuck with the letters, I mean it is not Hexadecimal, so I do not know how to specify that A is greater than 9 etc... – Buras Commented May 1, 2013 at 2:16

1 Answer 1

Here is a library that solves this exact problem:

https://github./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