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

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

首先，感谢@Juho Vepä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(调色板)将显示如下(示例)：

“002b36”，“073642”，“586e75”，“657b83”，“839496”，“93a1a1”，“eee8d5”，“fdf6e3”

Answer 3

您可以在两种颜色之间进行线性插值，例如(r1，g1，b1)到(r2，g2，b2)。使用一个取值为0-1的参数t。你可以通过使用(r，g，b)=(r1，g1，b1)+(r2-r1，g2-g1，b2-b1)*t得到两种颜色之间的平滑过渡