如何找到jQuery之间的颜色变化

Question

如果我有颜色#FF0CB6和#EC9CF4，我怎么能找到他们之间的10个变化（像一个渐变会这样做），并最终让他们在一个数组？

到类似的东西这个网站做：http://www.perbang.dk/rgbgradient/

有谁知道如何解决这个问题？

Answer 1

您可以使用'RainbowVis-JS'并获取两个颜色十六进制代码之间的十六进制颜色代码。

var numberOfItems = 8; 
var rainbow = new Rainbow(); 
rainbow.setNumberRange(1, numberOfItems); 
rainbow.setSpectrum('red', 'black'); 
var s = ''; 
for (var i = 1; i <= numberOfItems; i++) { 
    var hexColour = rainbow.colourAt(i); 
    s += '#' + hexColour + ', '; 
} 
document.write(s); 

Answer 2

要使用普通的JavaScript，您需要两件事。首先，您需要将HEX颜色转换为整数。我命名的函数colorStrToIntArray：

function colorStrToIntArray(color) { 
    // strip '#' 
    if (color.length == 4 || color.length == 7) { 
     color = color.substr(1); 
    } 

    // for colors like '#fff' 
    if (color.length == 3) { 
     var r = parseInt(color.substr(0, 1) + color.substr(0, 1), 16), 
      g = parseInt(color.substr(1, 1) + color.substr(1, 1), 16), 
      b = parseInt(color.substr(2, 1) + color.substr(2, 1), 16); 

     return [r, g, b]; 
    } 

    // for colors like '#ffffff' 
    else if (color.length == 6) { 
     return [ 
      parseInt(color.substr(0, 2), 16), 
      parseInt(color.substr(2, 2), 16), 
      parseInt(color.substr(4, 2), 16) 
     ]; 
    } 

    return false; 
} 

在刚刚calulate整数之间的差异的第二个步骤。瞧，有你的颜色：

function calculateSteps(color1, color2, steps) { 
    var output = [], 
     start = colorStrToIntArray(color1), 
     end = colorStrToIntArray(color2); 

    var calculate = function(start, end, step) { 
     return (start + Math.round((end - start) * (step/(steps/2)))); 
    }; 

    for (var i = 0; i < steps; i++) { 
     var color = [0, 0, 0]; 

     color[0] = calculate(start[0], end[0], i); 
     color[1] = calculate(start[1], end[1], i); 
     color[2] = calculate(start[2], end[2], i); 

     output.push(color); 
    } 

    return output; 
} 

该代码可能会缩短，但它的工作。 :)

Working example.

---

我写了一个小脚本，called js.colorGradient，为自己一段时间的年龄。它计算从0%到100%范围内的颜色。它允许你甚至使用两种以上的颜色来制作范围。这可能不是你正在寻找的东西，但随意改变它，因为你喜欢使用它。

var gradient = new ColorGradient(["#FF0CB6", "#EC9CF4", "#0F0", "#00F"]); 

for(var i = 0; i <= 100; i++) { 
    var color = gradient.getHexColorAtPercent(i); 
    $("#demo").append('<div style="background: ' + color + '">'); 
} 

Working example.