颜色空间/格式转换:HSL-RGB

本文章主要介绍HSL颜色空间和RGB颜色空间的区别和用途，以及如何利用HLSL着色器语言进行互转。

定义

HSL即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。
色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。可以说和光谱对应。取值为0-360度。
饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值。
明度（V），亮度（L），取0-100%。
如图所示，圆柱从低向上，表示亮度，由中轴向外表示饱和度，水平截面的圆周角表示色相。

如果用圆锥表示则为双圆锥：这种表示放法相比较圆柱更加直观，最低端的只用一个点表示黑色，如果用圆柱，用了一面表示黑色，无太大意义。从圆锥上可以看出，亮度的调节会影响颜色的丰富程度。

这种表示相比RGB更加直观，比如：白色可以直接将亮度设置为100%,而RGB需要设置三个通道。比如颜色想从黄色过度到红色，只需要调整色相即可，饱和度和亮度保持不变，而RGB调节相对就比较复杂且不直观。HSL一般更适用于用户，而RGB更适用于显示领域。

转换

HSL和RGB的相互转换百度百科有详细介绍。此处截图说明转换公式：

HLSL 实现

void RGB2HSL(in float3 rgb, out float3 hsl)
{
    float precision = 0.00001f;
    float rgbMax = max(max(rgb.r, rgb.g), rgb.b);
    float rgbMin = min(min(rgb.r, rgb.g), rgb.b);

    //hue
    [flatten]
    if (abs(rgbMax - rgbMin) < precision) // max == min
    {
        hsl.r = 0.0f;
    }
    else if (abs(rgbMax - rgb.r) < precision) // max == r
    {
        hsl.r = 60.0f * (rgb.g - rgb.b) / (rgbMax - rgbMin);
        if (rgb.g < rgb.b)
            hsl.r += 360.0f;
    }
    else if (abs(rgbMax - rgb.g) < precision) // max == g
    {
        hsl.r = 60.0f * (rgb.b - rgb.r) / (rgbMax - rgbMin) + 120.0f;
    }
    else if (abs(rgbMax - rgb.g) < precision) // max == b
    {
        hsl.r = 60.0f * (rgb.r - rgb.g) / (rgbMax - rgbMin) + 240.0f;
    }
      // light
    hsl.b = (rgbMax + rgbMin) / 2.0f;
     // saturation
    [flatten]
    if (hsl.b <= precision || abs(rgbMax - rgbMin) < precision)
    {
        hsl.g = 0.0f;
    }
    else if (hsl.b > 0.0f && hsl.b <= 0.5f)
    {
        hsl.g = (rgbMax - rgbMin) / (rgbMax + rgbMin);
    }
     else if (hsl.b > 0.5f)
    {
        hsl.g = (rgbMax - rgbMin) / (2 - (rgbMax + rgbMin));
    }
  }

float ToColor(float p, float q, float t)
{
    [flatten]
    if (t < 0.0f)
        t = t + 1.0f;
    else if (t > 1.0f)
        t = t - 1.0f;
    float c = 0.0f;
    [flatten]
    if (t < 0.166667f)
    {
        c = p + ((q - p) * 6 * t);
    }
    else if (t >= 0.166667f && t < 0.5f)
    {
        c = q;
    }
     else if (t >= 0.5f && t < 0.66667f)
    {
        c = p + ((q - p) * 6 * (0.66667f - t));
    }
    else
    {
        c = p;
    }
    return c;
}

void HSL2RGB(in float3 hsl, out float3 rgb)
{
    float precision = 0.00001f;
    [flatten]
    float hue = hsl.r;
    float sat = hsl.g;
    float light = hsl.b;
     if (sat < precision) // sat == 0
    {
        rgb = hsl.bbb;
    }
     else
    {
        float q = 0.0f, p = 0.0f, hk = 0.0;
        if (light < 0.5f)
        {
            q = light * (1 + sat);
        }
         else
        {
            q = light + sat - (light * sat);
        }
          p = 2.0f * light - q;
        hk = hue / 360.0f;
        rgb.r = ToColor(p, q, hk + 0.33333f);
        rgb.g = ToColor(p, q, hk);
        rgb.b = ToColor(p, q, hk - 0.33333f);
    }
}