如何在两个给定颜色的范围内生成n个颜色？

Question

我试图在JavaScript中动态地计算饼图的颜色范围。我需要颜色逐步从蓝色开始到结束蓝色，考虑到我不知道会有多少块饼片，我需要根据变量：n的值来计算它。

我在Java中找到了一个很好的答案：如何动态计算颜色列表？

但我不能百分之百确定这是如何转化为JavaScript的。我还需要它们在数组格式中排列有序(最轻到最暗/最暗到最轻)。

var colorArray = [];
var startColor = #18AED5;`
var endColor   = #1E1E26;`
// Calculate Colors...`

如果有人能帮忙，我会非常感激的。

Answer 1

你好，我创建了一个小演示

JS:

var div = document.getElementById('div');
var a = b = c = 0;
setInterval(function(){
    div.style.backgroundColor = 'rgb('+a+','+b+','+c+')';
    a+=1;
    b+=2;
    c+=3;
}, 50);

用rgb()代替十六进制更容易处理动态颜色变化。

更新：

我能做你想做的事。从一种颜色到另一种颜色。Demo2

var div = document.getElementById('div');

function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

var dynamicColorChange = function (start, end, target) {
    var startRGB = hexToRgb(start),
        endRGB = hexToRgb(end),
        si = setInterval(function () {
            if (startRGB.r < endRGB.r) {
                startRGB.r += 1;
            }else if(startRGB.r > endRGB.r){
            startRGB.r -= 1;
            }
            if (startRGB.g < endRGB.g) {
                startRGB.g += 1;
            }else if(startRGB.g > endRGB.g){
                startRGB.g -= 1;
            }
            if (startRGB.b < endRGB.b) {
                startRGB.b += 1;
            }else if(startRGB.b > endRGB.b){
                startRGB.b -= 1;
            }
            target.style.backgroundColor = 'rgb(' + startRGB.r + ',' + startRGB.g + ',' + startRGB.b + ')';
            if (startRGB.r == endRGB.r && startRGB.g == endRGB.g && startRGB.g == endRGB.g) {
                clearInterval(si);
            }
        }, 50);
    console.log(startRGB);
    console.log(endRGB);
};

dynamicColorChange('#18AED5', '#1E1E26', div);