如何使用HSL到RGB转换功能

How to Use HSL to RGB Conversion Function

本文关键字：转换 功能 RGB 何使用 HSL      更新时间：2023-09-26

感觉我在这里错过了一些非常简单的东西，但我无法从 HSL 到 RGB 颜色转换的答案中发布的公式起作用。有问题的函数是：

function hslToRgb(h, s, l){
    var r, g, b;
    if(s == 0){
        r = g = b = l; // achromatic
    }else{
        function hue2rgb(p, q, t){
            if(t < 0) t += 1;
            if(t > 1) t -= 1;
            if(t < 1/6) return p + (q - p) * 6 * t;
            if(t < 1/2) return q;
            if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
            return p;
        }
        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
    }
    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}

我相信，我的问题是关于输入什么作为我的"h"参数。通常，在 CSS 或 Photoshop 中使用 HSL 时，色调值是介于 0 和 360 之间的数字，但此函数调用的值介于 0 和 1 之间。有人可以向我解释一下，例如，如何将 240 的色调值转换为 0 到 1 之间的等效值，以便我可以将其代入此公式？我尝试将 240 除以 360，但这不起作用。

看起来原始算法是错误的。根据维基百科，你可以获得独立于色调的色度和亮度调整（因此类似的b值），但其他任何事情都需要更多的数学 - 特别是模。看起来该算法不能很好地处理该特定转换，特别是考虑到它期望色调在 [0， 1] 范围内。请尝试以下算法：

// expected hue range: [0, 360)
// expected saturation range: [0, 1]
// expected lightness range: [0, 1]
var hslToRgb = function(hue, saturation, lightness){
  // based on algorithm from http://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB
  if( hue == undefined ){
    return [0, 0, 0];
  }
  var chroma = (1 - Math.abs((2 * lightness) - 1)) * saturation;
  var huePrime = hue / 60;
  var secondComponent = chroma * (1 - Math.abs((huePrime % 2) - 1));
  huePrime = Math.floor(huePrime);
  var red;
  var green;
  var blue;
  if( huePrime === 0 ){
    red = chroma;
    green = secondComponent;
    blue = 0;
  }else if( huePrime === 1 ){
    red = secondComponent;
    green = chroma;
    blue = 0;
  }else if( huePrime === 2 ){
    red = 0;
    green = chroma;
    blue = secondComponent;
  }else if( huePrime === 3 ){
    red = 0;
    green = secondComponent;
    blue = chroma;
  }else if( huePrime === 4 ){
    red = secondComponent;
    green = 0;
    blue = chroma;    
  }else if( huePrime === 5 ){
    red = chroma;
    green = 0;
    blue = secondComponent;
  }
  var lightnessAdjustment = lightness - (chroma / 2);
  red += lightnessAdjustment;
  green += lightnessAdjustment;
  blue += lightnessAdjustment;
  return [Math.round(red * 255), Math.round(green * 255), Math.round(blue * 255)];
};

它可能在一些边缘情况下失败，但这些应该是简单的修复

相关文章：