javascript - 插入 HSL 颜色

Question

我正在构建一个星型可视化引擎，需要对从 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%,

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

我以前得到过一些帮助，但终究无法解决这个问题，也无法找到内插 HSL 值的简明教程或演练。我能解决这个问题的唯一方法是通过外部库，但这对于相对简单的事情来说似乎是一个荒谬的解决方案。任何帮助将不胜感激!

Answer 1

HSB 空间中一个简单的线性插值函数:

function get_color_for(value) {
    var i, h,s,b,stops = [
        [-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 (value <= stops[0][0]) return stops[0][1];
    if (value >= stops[stops.length - 1][0]) return stops[stops.length - 1][1];
    i = 0;
    while (value > stops[i][0])
       i++;
    value -= stops[i-1][0];
    value /= (stops[i][0]-stops[i-1][0]);
    h = stops[i-1][1][0]+(stops[i][1][0]-stops[i-1][1][0])*value;
    s = stops[i-1][1][1]+(stops[i][1][1]-stops[i-1][1][1])*value;
    b = stops[i-1][1][2]+(stops[i][1][2]-stops[i-1][1][2])*value;
    return [h,s,b];
}

对于低于最小输入的值，它总是返回第一个颜色集，对于高于最大值的值，返回最后一个颜色集。

返回值是一个HSL数组，可以直接在CSS中使用。如果您的环境需要 RGB 颜色，您可以使用 hsl-to-rgb 转换函数，例如 this earlier SO question .检查输出设备对 RGB 范围的期望值:0.0 到 1.0、0 到 100 或 0 到 255。

请注意，此函数不能用于hsb 一般。问题是 hue 部分:它以 360(度)环绕，因此尝试在 350 和 10 之间进行插值会使它返回青色(170 左右的值)而不是红色(0 处的值)。

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