我正在创建一个颜色选择器工具，对于 HSL 滑块，我需要能够将 RGB 转换为 HSL。当我搜索 SO 进行转换的方法时，我发现了这个问题HSL 到 RGB 颜色转换 https://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion.

虽然它提供了从 RGB 到 HSL 的转换功能，但我没有看到对计算中实际情况的解释。为了更好地理解它，我阅读了HSL 和 HSV https://en.wikipedia.org/wiki/HSL_and_HSV在维基百科上。

后来，我使用“HSL 和 HSV”页面中的计算重写了“HSL 到 RGB 颜色转换”的函数。

如果 R 是最大值，我就会陷入色调的计算。请参阅“HSL 和 HSV”页面中的计算：

这是来自另一个维基页面 https://nl.wikipedia.org/wiki/HSL_(kleurruimte)#Omzetting_van_RGB_naar_HSL这是荷兰语：

这是来自answers https://stackoverflow.com/a/9493060/2202732到“HSL 到 RGB 颜色转换”：

case r: h = (g - b) / d + (g < b ? 6 : 0); break; // d = max-min = c

我已经用一些 RGB 值测试了所有三个，它们似乎产生了相似的（如果不精确）结果。我想知道他们在做同样的事情吗？对于某些特定的 RGB 值会得到不同的结果吗？我应该使用哪一个？

hue = (g - b) / c;                   // dutch wiki
hue = ((g - b) / c) % 6;             // eng wiki
hue = (g - b) / c + (g < b ? 6 : 0); // SO answer

function rgb2hsl(r, g, b) {
    // see https://en.wikipedia.org/wiki/HSL_and_HSV#Formal_derivation
    // convert r,g,b [0,255] range to [0,1]
    r = r / 255,
    g = g / 255,
    b = b / 255;
    // get the min and max of r,g,b
    var max = Math.max(r, g, b);
    var min = Math.min(r, g, b);
    // lightness is the average of the largest and smallest color components
    var lum = (max + min) / 2;
    var hue;
    var sat;
    if (max == min) { // no saturation
        hue = 0;
        sat = 0;
    } else {
        var c = max - min; // chroma
        // saturation is simply the chroma scaled to fill
        // the interval [0, 1] for every combination of hue and lightness
        sat = c / (1 - Math.abs(2 * lum - 1));
        switch(max) {
            case r:
                // hue = (g - b) / c;
                // hue = ((g - b) / c) % 6;
                // hue = (g - b) / c + (g < b ? 6 : 0);
                break;
            case g:
                hue = (b - r) / c + 2;
                break;
            case b:
                hue = (r - g) / c + 4;
                break;
        }
    }
    hue = Math.round(hue * 60); // °
    sat = Math.round(sat * 100); // %
    lum = Math.round(lum * 100); // %
    return [hue, sat, lum];
}

我一直在阅读几个 wiki 页面并检查不同的计算，并创建 RGB 立方体投影到六边形上的可视化。我想发表我对这种转换的理解。由于我发现这种转换（使用几何形状表示颜色模型）很有趣，因此我将尽力做到彻底。首先，我们从 RGB 开始。

RGB

嗯，这确实不需要太多解释。最简单的形式是，有 3 个值：R、G 和 B，范围为 [0,255]。例如，51,153,204。我们可以用条形图来表示：

RGB Cube

我们还可以在 3D 空间中表示颜色。我们有三个价值观R, G, B对应于X, Y, and Z。所有三个值都在[0,255]范围，这会产生一个立方体。但在创建 RGB 立方体之前，我们先处理 2D 空间。 R、G、B 的两种组合给出：RG、RB、GB。如果我们将它们绘制在平面上，我们会得到以下结果：

这是 RGB 立方体的前三个面。如果我们将它们放置在 3D 空间上，则会产生一个半立方体：

如果你检查上图，通过混合两种颜色，我们会在 (255,255) 处得到一种新颜色，它们是黄色、洋红色和青色。同样，这些的两个组合给我们：YM、YC 和 MC。这些是立方体的缺失面。一旦我们添加它们，我们就得到了一个完整的立方体：

以及位置51,153,204在这个立方体中：

RGB 立方体在六边形上的投影

现在我们有了 RGB 立方体，让我们将其投影到六边形上。首先，我们将立方体倾斜 45°x，然后 35.264°y。第二次倾斜后，黑角在底部，白角在顶部，它们都穿过z axis.

正如您所看到的，当我们从顶部观察立方体时，我们得到了我们想要的具有正确色调顺序的六边形外观。但我们需要将其投影到真正的六边形上。我们要做的就是画一个与立方体顶视图大小相同的六边形。六边形的所有角都对应于立方体的角和颜色，立方体的顶角（白色）投影到六边形的中心。黑色被省略。如果我们将每种颜色映射到六边形上，我们就会得到正确的外观。

以及位置51,153,204在六边形上将是：

计算色调

在进行计算之前，我们先定义一下什么是色调。

色调大致是矢量与投影中一点的角度，红色为 0°。

...色调是该点在六边形边缘周围的距离。

这是从以下计算得出的HSL 和 HSV https://en.wikipedia.org/wiki/HSL_and_HSV#Hue_and_chroma维基页面。我们将在本说明中使用它。

检查六边形及其位置51,153,204 on it.

首先，我们缩放 R、G、B 值以填充 [0,1] 区间。

R = R / 255    R =  51 / 255 = 0.2
G = G / 255    G = 153 / 255 = 0.6
B = B / 255    B = 204 / 255 = 0.8

接下来，找到max and min的值R, G, B

M = max(R, G, B)    M = max(0.2, 0.6, 0.8) = 0.8
m = min(R, G, B)    m = min(0.2, 0.6, 0.8) = 0.2

然后，计算C（色度）。色度定义为：

... 色度大致是点到原点的距离。