Javascript调色板生成器 - 在Javascript中生成中间颜色数组的公式给出两个十六进制（＃abc123）值？

Question

考虑到2或3种基色，我试图生成中间色，使2-3变为5到50之间的任何值，如下图所示。

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

Answer 1

核心理念：使用线性插值。

示例：

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 ret;
}

此外，您可能会发现对Color进行某种形式的抽象很有用。你可以通过像“var col = new Color（'＃ff00ff'）;”来实例化它，将颜色变成更好的形式。之后，您可以轻松访问其rgb和hsv值。

以下是一个示例（未经测试），展示了它在实践中应如何运作：

// this func returns n colors (begin, <interpolated colors>, end)
function lerpColors(begin, end, n) {
    var ret = [];

    for(var i = 0; i < n; i++) {
        var fac = i / (n - 1);

        ret.push(lerp(a.toRGBArray(), b.toRGBArray(), fac));
    }

    return ret;
}

var col1 = new Color('#ff0011'); // some red
var col2 = new Color('#00ff11'); // some green

var colors = lerpColors(col1, col2, 7);

Answer 2

你可以在两种颜色之间进行线性插值，比如说（r1，g1，b1）到（r2，g2，b2）。 使用值为0-1的参数t。通过使用（r，g，b）=（r1，g1，b1）+（r2-r1，g2-g1，b2-b1）* t

，可以在两种颜色之间实现平滑过渡

Answer 3

首先，感谢@JuhoVepsä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']