Software Gradient Stops Using Javascript

Question

Working with Javascript (jQuery), given 2 color values ​​( 2033ffand 3300a0for example), how can I define certain boundary stops between them?

The reason is because I intend to use an array of color values:

    0 => '000000'
 8400 => 'f0ff00'
44000 => '2033ff'
68400 => '3300a0'

Currently 86400 seconds a day, 12:00 AM displays up to 0 and 11:59 PM maps up to 86399. After a lapse of time, the background color of the specified item changes to the corresponding color in the list of gradients through window.setInterval(function(e){ ... }, 1000). For example 2:32:11PM = 52331, which of the example will be somewhere between 2033ffand 3300a0.

I don't need to populate the array with values ​​(unless it is easier), but use the index and value as references instead.

Answer 1

:

, 2033ff 3300a0 , :

red1 = 0x2033ff >> 16;
green1 = (0x2033ff >> 8) & 0xFF;
blue1  = 0x2033ff & 0xFF;

red2 = 0x3300a0 >> 16;
green2 = (0x3300a0 >> 8) & 0xFF;
blue2  = 0x3300a0 & 0xFF;

time = 0.3 // This should be between 0 and 1

outred = time * red1 + (1-time) * red2;
outgreen = time * green1 + (1-time) * green2;
outblue = time * blue1 + (1-time) * blue2;

Answer 2

RainbowVis-JS . :

var rainbow = new Rainbow(); 
rainbow.setSpectrum('2033ff', '3300a0');
rainbow.setNumberRange(1, 86400);
var colour = rainbow.colourAt(52331); // 2c14c5