为什么这个Javascript RGB到HSL代码工作？ [英] Why doesn't this Javascript RGB to HSL code work?

问题描述

我发现这个RGB到HSL脚本在 http://www.mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms- in-javascript 。我找不到任何其他小的体面的。问题是，这个代码甚至不真的工作。有人知道为什么吗？ （我不知道一点颜色数学，但也许它返回的补充？）

  function rgbToHsl ，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  case g：h =（b-r）/ d + 2;打破; 
 case b：h =（r-g）/ d + 4;打破; 
} 
 h / = 6; 
} 
 
 return [h，s，l]; 
} 
  

编辑：当我运行 rgbToHsl

h2_lin>解决方案

生成的HSV数组必须解释为三个分数。对于某些程序，如果要将HSV表示为整数，则将H值乘以360，将S和V值乘以100.您为绿色阴影RGB [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  case g：h =（b-r）/ d + 2;打破; 
 case b：h =（r-g）/ d + 4;打破; 
} 
 h / = 6; 
} 
 
 return [Math.floor（h * 360），Math.floor（s * 100），Math.floor（l * 100）]; 
} 
  



说，它仍然给我一些亮度L或V），这太黑了; Gimp说HSV值应该是[90,80,82]，或者是小数形式[0.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&品红
 else if（g == max）
 h = 2 +（b-r）/ delta; // between cyan&黄色
 else 
 h = 4 +（r-g）/ delta; // between magenta& cyan 
 
 h = Math.floor（h * 60）; // degrees 
 if（h< 0）h + = 360; 
 
 return [h，s，v]; 
} 
  

I found this RGB to HSL script over at http://www.mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript. I can't find any other small decent ones. The issue is that this code doesn't even really work. Would anybody know why? (I don't know a bit of color math, but maybe it's returning the complementary?)

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];
}

Edit: when I run rgbToHsl(126,210,22) it's giving me [ .24, .81, .45 ], which is the HSL for an orange color.

解决方案

The resulting HSV array has to be interpreted as three fractions. For some programs, if you want to express HSV as integers, you multiply the "H" value by 360 and the "S" and "V" values by 100. The HSV value you quote for your green shade RGB[126, 210, 22] is HSV [87, 81, 45] in integers. You could change the function to return such integers if you want to:

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)];
}

[edit] that said, it's still giving me something with a brightness ("L" or "V") that's considerably too dark; Gimp says that the HSV value should be [90, 80, 82], or in fractional terms [.20, .80, .82].

[another edit] well one problem could be that HSL and HSV are different schemes ... still looking around.

OK in case anybody wants RGB to HSV (like you'd see in Gimp for example) here's a version of that:

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];
}

这篇关于为什么这个Javascript RGB到HSL代码工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！