使用Javascript停止编程梯度

使用Javascript停止编程梯度,javascript,jquery,colors,hex,gradient,Javascript,Jquery,Colors,Hex,Gradient,使用Javascript(jQuery),给定两个颜色值(2033ff和3300a0),如何确定它们之间的某些渐变停止点 原因是,我打算使用颜色值数组: 0 => '000000' 8400 => 'f0ff00' 44000 => '2033ff' 68400 => '3300a0' 一天有86400秒,上午12:00对应于0,晚上11:59对应于86399。随着时间的推移,指定元素的背景色通过window.setInterval(函数(e){…},1000

使用Javascript(jQuery),给定两个颜色值(
2033ff
3300a0
),如何确定它们之间的某些渐变停止点

原因是,我打算使用颜色值数组:

    0 => '000000'
 8400 => 'f0ff00'
44000 => '2033ff'
68400 => '3300a0'
一天有86400秒,上午12:00对应于0,晚上11:59对应于86399。随着时间的推移,指定元素的背景色通过
window.setInterval(函数(e){…},1000)
更改为渐变列表中的相应颜色。例如
2:32:11PM=52331
,该示例中的值介于
2033ff
3300a0
之间


我不需要用值填充数组(除非这样更容易),而是使用索引和值作为参考。

只需执行线性插值:

以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;
我编写了这个库,作为将数字映射到颜色的通用解决方案。例如,您可以使用:

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

杰出的尼科;很有魅力:)谢谢你的图书馆。我刚刚教了我们的一位设计师如何使用它,他很喜欢D