Programmatic gradient stops with Javascript

Question

Working with Javascript (jQuery), given 2 color values (2033ff and 3300a0 for example) how can I determine certain gradient stops between them?

Reason being is, I intend on using an array of color values:

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

There being 86400 seconds in a day, 12:00AM maps to 0, and 11:59PM maps to 86399. As time passes, the background color of a specified element changes to the appropriate color in gradient list via window.setInterval(function(e){ ... }, 1000). For example 2:32:11PM = 52331, which from the example would be somewhere between 2033ff and 3300a0.

I don't need to populate the array with the values (unless that would be easier) but instead use the index and value as references.

nico · Accepted Answer · 2011-01-02 19:50:02Z

6

Just do a linear interpolation:

Given 2033ff and 3300a0 as start and end you'll do:

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;

answered Jan 2, 2011 at 19:50

nico

51.9k17 gold badges92 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dan Lugg Over a year ago

Outstanding nico; Works like a charm :)

anomal · Accepted Answer · 2012-02-28 05:22:07Z

4

I wrote the library RainbowVis-JS as a general solution for mapping numbers to colours. For your example, you would use:

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

answered Feb 28, 2012 at 5:22

anomal

2,3192 gold badges19 silver badges18 bronze badges

1 Comment

Aaron Over a year ago

Thanks for the library. I just taught one of our designers how to use it and he loves it. :D

Collectives™ on Stack Overflow

Programmatic gradient stops with Javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related