插值 HSL 颜色

Question

我正在构建一个星型可视化引擎，需要插入从 API 接收到的值。HSL 色标为：

\n\n

-.63, hsl: 228\xc2\xb0 100% 80%,\n.165, hsl: 224\xc2\xb0 100% 90%,\n.33, hsl: 240\xc2\xb0 100% 98%,\n.495, hsl: 64\xc2\xb0 100% 92%,\n.66, hsl: 52\xc2\xb0 100% 82%,\n.825, hsl: 28\xc2\xb0 100% 66%,\n2.057, hsl: 6\xc2\xb0 95% 65%,\n

\n\n

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

\n\n

我之前得到过一些帮助，但我一生都无法弄清楚这一点，并且无法找到插值 HSL 值的简明教程或演练。我能解决这个问题的唯一方法是通过外部库，但这对于相对简单的事情来说似乎是一个荒谬的解决方案。任何帮助，将不胜感激！

\n

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 转换函数，例如在这个早期的 SO 问题中。检查输出设备期望的 RGB 范围：0.0 到 1.0、0 到 100 或 0 到 255。

请注意，此功能不能用于hsb 一般用途。问题在于hue部分：这会在 360（度）处环绕，因此尝试在350和之间进行插值10将使其返回青色（170 左右的值）而不是红色（0 处的值）。

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