Javascript hsv到rgb颜色转换背后的数学

我正在研究将hsv转换为rgb颜色空间的算法，在wikipdia上发现了这个。 我在这里找到了这个算法的EIM实现

但就我所知，这两个概念是如何联系在一起的，这些计算背后的数学原理是什么

这是密码

/**
 * Converts an HSV color value to RGB. Conversion formula
 * adapted from http://en.wikipedia.org/wiki/HSV_color_space.
 * Assumes h, s, and v are contained in the set [0, 1] and
 * returns r, g, and b in the set [0, 255].
 *
 * @param   Number  h       The hue
 * @param   Number  s       The saturation
 * @param   Number  v       The value
 * @return  Array           The RGB representation
 */
function hsvToRgb(h, s, v){
    var r, g, b;

    var i = Math.floor(h * 6);
    var f = h * 6 - i;
    var p = v * (1 - s);
    var q = v * (1 - f * s);
    var t = v * (1 - (1 - f) * s);

    switch(i % 6){
        case 0: r = v, g = t, b = p; break;
        case 1: r = q, g = v, b = p; break;
        case 2: r = p, g = v, b = t; break;
        case 3: r = p, g = q, b = v; break;
        case 4: r = t, g = p, b = v; break;
        case 5: r = v, g = p, b = q; break;
    }

    return [r * 255, g * 255, b * 255];
}.

---

我想了解它背后的逻辑&用于推导转换算法中使用的这些特定值的数学。

简单的方法是自己设计（然后检查差异），相反的方法更容易：从RGB到HSV。您的公式应该是数学上的逆运算（使用浮点运算，否则您将丢失信息）。在下面的解释中，我将使用从0到1的值（如果您使用的是8位RGB，则用255除以）

值只是定义为RGB的最大值（只是为了让事情更简单），如果需要亮度，应该对3个通道加权并求和。有了这个定义（值），我们可以得到具有相同值的最亮的蓝色、红色和绿色，这对于颜色选择器来说很方便。我们知道一个完整的蓝色屏幕（满[0,0255]）比一个完整的绿色屏幕[0255,0]更暗

色调表示纯色（如果完全饱和），即色轮上的颜色。这是通过混合R、G、B的两种成分（第三种成分应为0）来实现的。为什么会这样？取一个典型的CIE xy图形（例如on）。纯色调是光谱颜色，因此只有一个波长（外部颜色）加上紫色线（较低的线），因此混合了较深的紫色和较深的红色。使用RGB，我们可以只显示三角形的内容（+缺少的z（或Y）轴上的颜色）。因此，最相似、最纯净的颜色是R、G、B点之间三角形边缘的颜色。三角形上的点只有一个或两个分量。[CIE xy图形很好，因为两种颜色的混合应该在两种颜色之间的直线上]

好色轮（用于混合，而非感知）的一个特性是：通过将一种颜色与另一种颜色（在色轮上）混合，一种颜色变成灰色。因此，方向盘上的颜色也相反。所以我们有6种颜色：红色[255,0,0]，黄色[255255,0]，绿色[0255,0]，青色[0255255]，蓝色[0,0255]，洋红[255,0255]。这是六个案例，相隔60度。所以如果你有[255，20，0]，你是从红色到黄色的20/255（其中255/255是60度）。如果你写下所有的例子，你会发现你最终可以简化计算[通常在公共库中完成]

饱和度：完全饱和就像色调（因此一个分量为零），完全不饱和的颜色是灰色（或黑色或白色），因此所有分量的值都相同。因此，最大分量与最小分量之差就是饱和

为什么不像某些公式那样取最小值呢？这也是一个很好的定义（可能更精确），在某些地方也使用。但深色似乎也是不饱和的（所以“混合”黑色或白色应该有相似的颜色，所以差异不是最小值）。它的方式（差异），饱和度是独立的价值，这是更直观的颜色选择器。饱和度除以最大分量值。此外，这只是每个案例都有一个0到1的数字

例外情况：然后会有一些预期（您将看到是否执行了计算，例如，如果所有分量值相等，则色调定义为零（没有关系：完全不饱和的颜色没有色调）。无法计算黑色饱和度（零除以零），但它是不饱和颜色，因此我们将其设置为0

如果你推导出相反的公式，你就会看到你的公式

注：这些计算通常针对RGB（因此它们不是真实的色调或饱和度，或亮度），而对于颜色选择器，则是从0到1（或100，或360）的标准化值。实际上，最小饱和度（因此最大色度）取决于色调。饱和度应取决于亮度等。因此，更具物理性的颜色选择器不应是圆形（圆柱体、双圆锥体），而应是形状更复杂的图形。这对存储效率不高（信息丢失，例如输入整数：并非所有组合都有效），而且通常不太直观