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

问题描述

我在 http://www.mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript.我找不到任何其他体面的小.问题是这段代码甚至不起作用.有人会知道为什么吗?(我不懂一点颜色数学，但也许它会返回互补?)

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

当我运行 rgbToHsl(126,210,22) 时，它给了我 [ .24, .81, .45 ]，这是橙色的 HSL.

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

推荐答案

生成的 HSV 数组必须解释为三个分数.对于某些程序，如果您想将 HSV 表示为整数，请将H"值乘以 360，将S"和V"值乘以 100.您为绿色阴影引用的 HSV 值 RGB[126, 210,22] 是整数的 HSV [87, 81, 45].如果需要，您可以更改函数以返回此类整数:

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] 也就是说，它仍然给我一些亮度(L"或V")太暗的东西；Gimp 说 HSV 值应该是 [90, 80, 82]，或者以小数形式表示 [.20, .80, .82].

[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].

[另一个编辑]嗯，一个问题可能是 HSL 和 HSV 是不同的方案......仍在四处寻找.

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

如果有人想要 RGB 到 HSV(例如你在 Gimp 中看到的)，这里有一个版本:

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屋！