爲什麼這個Javascript RGB到HSL代碼不起作用？

Question

我在http://www.mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript處發現了此RGB到HSL腳本。我找不到任何其他體面的小人物。問題是這個代碼甚至沒有真正的工作。有人會知道爲什麼嗎？ （我不知道一點顏色的數學，但也許它的返回互補？）

function rgbToHsl(r, g, b){ 
    r /= 255, g /= 255, b /= 255; 
    var max = Math.max(r, g, b), min = Math.min(r, g, b); 
    var h, s, l = (max + min)/2; 

    if(max == min){ 
     h = s = 0; // achromatic 
    }else{ 
     var d = max - min; 
     s = l > 0.5 ? d/(2 - max - min) : d/(max + min); 
     switch(max){ 
      case r: h = (g - b)/d + (g < b ? 6 : 0); break; 
      case g: h = (b - r)/d + 2; break; 
      case b: h = (r - g)/d + 4; break; 
     } 
     h /= 6; 
    } 

    return [h, s, l]; 
} 

編輯：當我運行rgbToHsl(126,210,22)它給我[0.24，0.81，0.45]，這是HSL爲橙色。

Answer 1

生成的HSV陣列必須被解釋爲三個部分。對於某些程序，如果要將HSV表示爲整數，則將「H」值乘以360，將「S」和「V」值乘以100.將您引用的綠色陰影RGB的HSV值[126,210， 22]是HSV [87,81,45]整數。你可以改變的功能，如果你想回到這樣的整數：

function rgbToHsl(r, g, b){ 
    r /= 255, g /= 255, b /= 255; 
    var max = Math.max(r, g, b), min = Math.min(r, g, b); 
    var h, s, l = (max + min)/2; 

    if(max == min){ 
     h = s = 0; // achromatic 
    }else{ 
     var d = max - min; 
     s = l > 0.5 ? d/(2 - max - min) : d/(max + min); 
     switch(max){ 
      case r: h = (g - b)/d + (g < b ? 6 : 0); break; 
      case g: h = (b - r)/d + 2; break; 
      case b: h = (r - g)/d + 4; break; 
     } 
     h /= 6; 
    } 

    return [Math.floor(h * 360), Math.floor(s * 100), Math.floor(l * 100)]; 
} 

[編輯]中說，它仍然給我用這大大太暗亮度（「L」或「V」）的東西; Gimp說HSV值應該是[90,80,82]，或者是分數形式[.20，.80，.82]。

[另一編輯]一個問題可能是HSL和HSV是不同的方案...仍然環顧四周。

的情況下，任何人都OK想RGB到HSV（像你在GIMP例如看）這裏有一個版本是：

function rgbToHsv(r, g, b) { 
    var 
     min = Math.min(r, g, b), 
     max = Math.max(r, g, b), 
     delta = max - min, 
     h, s, v = max; 

    v = Math.floor(max/255 * 100); 
    if (max != 0) 
     s = Math.floor(delta/max * 100); 
    else { 
     // black 
     return [0, 0, 0]; 
    } 

    if(r == max) 
     h = (g - b)/delta;   // between yellow & magenta 
    else if(g == max) 
     h = 2 + (b - r)/delta;  // between cyan & yellow 
    else 
     h = 4 + (r - g)/delta;  // between magenta & cyan 

    h = Math.floor(h * 60);   // degrees 
    if(h < 0) h += 360; 

    return [h, s, v]; 
} 

Answer 2

以下功能RGB顏色轉換成色相飽和度顏色，如Photoshop拾色器，結果是在所述範圍：

• 色相0-360（度）
• 飽和度：0-100（％）
• 亮度：0-100（ ％）

我還是不明白爲什麼人們用它代替HSB（色調，飽和度亮度術語HSV（色調，飽和度值）），反正這是FO術語的問題，其結果都是一樣的

//Converts to color HSB object (code from here http://www.csgnetwork.com/csgcolorsel4.html with some improvements) 
    function rgb2hsb(r, g, b) 
    {  
    r /= 255; g /= 255; b /= 255; // Scale to unity. 
    var minVal = Math.min(r, g, b), 
    maxVal = Math.max(r, g, b), 
    delta = maxVal - minVal, 
    HSB = {hue:0, sat:0, bri:maxVal}, 
    del_R, del_G, del_B; 

    if(delta !== 0) 
    { 
     HSB.sat = delta/maxVal; 
     del_R = (((maxVal - r)/6) + (delta/2))/delta; 
     del_G = (((maxVal - g)/6) + (delta/2))/delta; 
     del_B = (((maxVal - b)/6) + (delta/2))/delta; 

     if (r === maxVal) {HSB.hue = del_B - del_G;} 
     else if (g === maxVal) {HSB.hue = (1/3) + del_R - del_B;} 
     else if (b === maxVal) {HSB.hue = (2/3) + del_G - del_R;} 

     if (HSB.hue < 0) {HSB.hue += 1;} 
     if (HSB.hue > 1) {HSB.hue -= 1;} 
    } 

    HSB.hue *= 360; 
    HSB.sat *= 100; 
    HSB.bri *= 100; 

    return HSB; 
    } 

用例：

var hsb = rgb2hsb(126,210,22); 
alert("hue = " + hsb.hue + "saturation = " + hsb.sat + "brightness = " + hsb.bri);