Javascript 调色板生成器 - 在给定两个十六进制(#abc123)值的 Javascript 中生成中间颜色数组的公式？

Question

给定 2 或 3 种基色，我尝试生成中间颜色，以便 2-3 变成 5 到 50 之间的任何颜色，如下图所示。

有什么想法吗？我正在使用 Highcharts 制作饼图。

Answer 1

首先，感谢@Juho Vepsäläinen

我这样申请我的项目

function lerp(a, b, fac) {
    var ret = [];

    for(var i = 0; i < Math.min(a.length, b.length); i++) {
        ret[i] = a[i] * (1 - fac) + b[i] * fac;
    }

    return new Color().setRGB(ret[0], ret[1], ret[2]).toString();
}

function lerpColors(begin, end, n) {
    var ret = [];

    for(var i = 0; i < n; i++) {
        var fac = i / (n - 1);
        ret.push(lerp(begin.toRGBArray(), end.toRGBArray(), fac));
    }

    return ret;
}

var paletteSize = 300;
var palette = lerpColors(
    new Color('#C6DBEF'),
    new Color('#3182BD'),
    paletteSize
);

console.log(palette) 将显示如下(示例):

['002b36', '073642', '586e75', '657b83', '839496'，'93a1a1'，'eee8d5'，'fdf6e3']