javascript - 选择两种颜色并获得介于两者之间的 n 种颜色

Question

我想在边界内选择给定数量的颜色。例如，我将 #fff 和 #000 作为边界，并希望中间有 5 种颜色。我如何才能使 #fff, color 2, ..., color5, #000 均匀分布？

我想根据图表中元素的动态数量为图表工具选择颜色。只是想知道这是否可以通过代码轻松完成，或者也许已经有一个在线工具可以做到这一点？否则我会手动选择颜色 ;)

Answer 1

您可以编写一个函数来获取一个区间，并用区间及其倍数创建一个数组。

function getInbetweenColors(color1, color2, count) {
    var array = [color1],
        c1 = parseInt(color1.substring(1), 16),
        c2 = parseInt(color2.substring(1), 16),
        interval = (c2 - c1) / count,
        i;

    for (i = 1; i < count; i++) {         
        array[i] = Math.floor(c1 + i * interval).toString(16);
        while(array[i].length < color1.length-1) {
           array[i]= '0' + array[i];
        }
        array[i]= '#' + array[i];
    }
    array[count] = color2;
    return array;
}

document.write('<pre>' + JSON.stringify(getInbetweenColors('#fff', '#000', 5), 0, 4) + '</pre>');
document.write('<pre>' + JSON.stringify(getInbetweenColors('#0391f5', '#27333d', 5), 0, 4) + '</pre>');