如何找到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.