Javascript 插值HSL颜色

我正在构建一个star可视化引擎，需要对从API接收到的值进行插值。HSL彩色挡块包括：

-.63, hsl: 228° 100% 80%,
.165, hsl: 224° 100% 90%,
.33, hsl: 240° 100% 98%,
.495, hsl: 64° 100% 92%,
.66, hsl: 52° 100% 82%,
.825, hsl: 28° 100% 66%,
2.057, hsl: 6° 95% 65%,

每颗星将返回一个介于-0.63和2.057之间的颜色值，我需要一个函数来获取该值，并沿着由上述停止点组成的光谱获取颜色

---

我以前曾得到过一些帮助，但我一生都无法理解这一点，也无法找到一个简明的教程或插值HSL值的演练。我能弄明白这一点的唯一方法是通过外部lib，但对于相对简单的东西来说，这似乎是一个荒谬的解决方案。任何帮助都将不胜感激

HSB空间中的简单线性插值函数：

函数获取（值）的颜色{
变量i、h、s、b、停止=[
[-0.63, [228, 100, 80]],
[0.165, [224, 100, 90]],
[0.33, [240, 100, 98]],
[0.495, [64, 100, 92]],
[0.66, [52, 100, 82]],
[0.825, [28, 100, 66]],
[2.057, [6, 95, 65]]
];
if（值=停止[stops.length-1][0]）返回停止[stops.length-1][1]；
i=0；
而（值>停止[i][0]）
i++；
值-=停止[i-1][0]；
值/=（停止[i][0]-停止[i-1][0]）；
h=停止[i-1][1][0]+（停止[i][1][0]-停止[i-1][1][0]）*值；
s=停止[i-1][1][1]+（停止[i][1][1]-停止[i-1][1][1]）*值；
b=停止[i-1][1][2]+（停止[i][1][2]-停止[i-1][1][2]）*值；
返回[h，s，b]；
}

对于小于最小输入的值，它始终将返回第一个颜色集，对于大于最大值的值，它将返回最后一个颜色集

返回的值是一个HSL数组，可以立即在CSS中使用。如果您的环境需要RGB颜色，则可以使用hsl到RGB转换功能，例如。检查输出设备对RGB范围的期望值：0.0到1.0、0到100或0到255

请注意，此功能通常不能用于

hsb

。问题在于

hue

部分：它以360度环绕，因此尝试在

350

和

10

之间插值将使其返回青色（170左右的值），而不是红色（0处的值）

---

这是一个，显示一系列数字的输出。

RGB插值更适合您的色阶，HSL在蓝色和黄色之间添加绿色：

RGB插值：

function lerp(start, end, t) {
    return (1 - t) * start + t * end;
}

function getColor(t) {
    var colors = [
        [153, 173, 255], [204, 218, 255], [245, 245, 255],
        [252, 255, 214], [255, 243, 163], [255, 163, 82],
        [251, 98,  81]
    ];
    var domain = [-0.63, 0.165, 0.33, 0.495, 0.66, 0.825, 2.057];

    if (t <= domain[0]) {
        return colors[0];
    }

    if (t >= domain[domain.length - 1]) {
        return colors[colors.length - 1];
    }

    for (var i = 0; t > domain[i]; i++);

    var from = colors[i - 1];
    var to = colors[i];
    t = (t - domain[i - 1]) / (domain[i] - domain[i - 1]);
    return [
        lerp(from[0], to[0], t),
        lerp(from[1], to[1], t),
        lerp(from[2], to[2], t)
    ];
}

函数lerp（开始、结束、t）{
返回（1-t）*开始+t*结束；
}
函数getColor（t）{
变量颜色=[
[153, 173, 255], [204, 218, 255], [245, 245, 255],
[252, 255, 214], [255, 243, 163], [255, 163, 82],
[251, 98,  81]
];
var域=[-0.63,0.165,0.33,0.495,0.66,0.825,2.057]；
if（t=domain[domain.length-1]）{
返回颜色[colors.length-1]；
}
对于（var i=0；t>domain[i]；i++）；
var from=颜色[i-1]；
var to=颜色[i]；
t=（t-域[i-1]）/（域[i]-域[i-1]）；
返回[
lerp（从[0]到[0]，t），
lerp（从[1]到[1]，t），
lerp（从[2]到[2]，t）
];
}

绘制它：

function rgbToCSS(rgb) {
    return 'rgb(' + Math.round(rgb[0]) + ',' +
                    Math.round(rgb[1]) + ',' +
                    Math.round(rgb[2]) + ')';
}

var canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 100;
var context = canvas.getContext('2d');
for (var i = 0; i < canvas.width; i++) {
    context.fillStyle = rgbToCSS(getColor(lerp(-0.63, 2.057, i / canvas.width)));
    context.fillRect(i, 0, 1, canvas.height);
}
document.body.appendChild(canvas);

函数rgbToCSS（rgb）{
返回'rgb（'+Math.round（rgb[0]）+'，'+
数学圆（rgb[1]）+'，'+
数学圆（rgb[2]）+'）；
}
var canvas=document.createElement（'canvas'）；
画布宽度=800；
画布高度=100；
var context=canvas.getContext（'2d'）；
对于（变量i=0；i

---

我看不出有什么具体问题。你需要弄清楚的“这个”是什么？线性插值？@Jongware是的，为了清楚起见，我更新了问题。好的，谢谢-好多了。不过，您的HSL阵列看起来很奇怪。我们是否可以假设这些值是固定的，这样我们就可以用更常见的Javascript表示法来记录它们？@Jongware是的，它们是固定的。对不起，我不熟悉HSL颜色，以前从未使用过。据我所知，它们插值的失真度比十六进制或rgb（？）小，这取决于你所说的失真度。插值沿着你交给它的轴工作，在HSL的例子中，其中一个是色调，它看起来比RGB更自然。我也发现了绿色，但我的天体物理学不够强，无法决定恒星是否真的有这种颜色（杰克·万斯（Jack Vance）在他的一本小说中至少提到了一颗；我不知道这是否算数）。我相当肯定它们不会在RGB空间发光，所以我没有对它进行注释。不过：+1也是一个很好的答案！@Jongware天文学家目前还没有发现绿色恒星，颜色从蓝色变为白色，然后变为黄色