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

Question

给定2或3个基本颜色，我试图生成中间颜色，使得2-3个颜色变成5到50个颜色之间，就像下面的图表一样。

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

- Lance

---

2种颜色的情况很简单，只需使用线性插值即可。但是我对3种颜色的情况有些困惑（在那里也要使用lerp吗？）。您能否提供更具体的示例？ - Juho Vepsäläinen

假设我只有红色、蓝色和绿色，甚至可能还有第四种颜色（黄色）。我想我可以做红蓝、蓝绿、绿黄、黄红之间的插值，然后按顺序保留它们。 - Lance

这并不是一个真正的答案，但是使用一些时髦的数学生成颜色循环的这篇文章可能会帮助其他遇到类似问题的人：http://www.krazydad.com/makecolors.php（使用正弦波）。 - Quickredfox

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']

- kkd927

Answer 2

核心思想：使用线性插值。

示例：

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

此外，你可能会发现拥有某种形式的颜色抽象化很有用。你可以通过实例化它来使你的颜色变得更好看，例如 "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);

- Juho Vepsäläinen

---

这些变量是什么，看起来很有前途。 - Lance

我将使用颜色类勾勒出一个解决方案，这样你就能理解了。 :) - Juho Vepsäläinen

以上代码存在一些错误，但思路是正确的。你可以在这里看到一个可以运行的版本：https://github.com/Eccenux/GoogleFormAnalysis/blob/master/js/charts/colorGenerator.js - Nux

Answer 3

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

- SEngstrom

---

你有这些颜色的 JavaScript 版本吗 #123123 #abcabc :D？ - Lance

#123123 是 (r1,g1,b1)=(0x12,0x31,0x23) [十六进制的RGB值]. - SEngstrom