[RESOLVED] IE can't get the RGB code of an element's background

[Mr Initial Man]

The page is http://www.mrinitialman.com/Books/HTML/hsl.xhtml Getting the RGB code of an element's background is crucial to the full working of the page, but I.E. selects the style in HSL notation. If I could get it in either RGB--or even Hex--notation, I could get this page to work properly.

[svidgen]

If you're assigning the styles in HSL, my guess is that you can only get them back in HSL from the style tag. Have you tried the solution given to you for a similar problem: http://www.webdeveloper.com/forum/sh...d.php?t=257830

[Mr Initial Man]

Just did; coothead's solution doesn't work at all in this case (I just get "undefined" as a value) and rnd_me's method is the one I'm using now.

[svidgen]

Whelp. The alternative is to perform the conversion yourself: http://www.cs.rit.edu/~ncs/color/t_convert.html

[svidgen]

Oops. That's for HSV. Try this:
http://mjijackson.com/2008/02/rgb-to...-in-javascript

And if all else fails, learn yourself some color theory and write your own implementation:
http://en.wikipedia.org/wiki/HSL_and_HSV

[Mr Initial Man]

Just found it: IE9 supports both document.defaultView.getComputedStyle() AND element.currentStyle--but they return different results! getComputedStyle returns the RGB code, and currentStyle returns whatever the style property has been set to.

[Troy III]

The page is http://www.mrinitialman.com/Books/HTML/hsl.xhtml Getting the RGB code of an element's background is crucial to the full working of the page, but I.E. selects the style in HSL notation. If I could get it in either RGB--or even Hex--notation, I could get this page to work properly.

I'm not sure IE will return HSL, I believe it will return HEX instead.
Converting hex to rgb and v.v is rather easy.

[svidgen]

Interesting ... But, perhaps the most cross-browser compatible solution is to just read the style normally and run it through a conversion library.

Well ... or to take the advice of Charles Poynton:

HSB and HLS were developed to specify numerical Hue, Saturation and Brightness (or Hue, Lightness and Saturation) in an age when users had to specify colors numerically. The usual formulations of HSB and HLS are flawed with respect to the properties of color vision. Now that users can choose colors visually, or choose colors related to other media (such as PANTONE), or use perceptually-based systems like L*u*v* and L*a*b*, HSB and HLS should be abandoned.

-- http://en.wikipedia.org/wiki/HSL_and_HSV#cite_ref-37

(Whoever the hell Charles Poynton is .. )

[Troy III]

Just found it: IE9 supports both document.defaultView.getComputedStyle() AND element.currentStyle--but they return different results! getComputedStyle returns the RGB code, and currentStyle returns whatever the style property has been set to.

yes the currentStyle property will most probably return the exact input, and in most problematic cases it will return a human readable string, like for instance "silver".

[Mr Initial Man]

Got the page working! I even fixed a slight problem with the colours and their assigned Hex/RGB codes not quite lining up. The solution was:

"If Saturation is 0 and Lightness is 100 or 0, assume Hue is 0. If Lightness is 100 or 0, assume Saturation is 0. Use resultant hex code to get the colour name. Use the colour name to get the Hex Code. Use Hex Code to get RGB Code."

[svidgen]

Gratz.

[Troy III]

Got the page working! I even fixed a slight problem with the colours and their assigned Hex/RGB codes not quite lining up. The solution was:

"If Saturation is 0 and Lightness is 100 or 0, assume Hue is 0. If Lightness is 100 or 0, assume Saturation is 0. Use resultant hex code to get the colour name. Use the colour name to get the Hex Code. Use Hex Code to get RGB Code."

So, how are you getting the name of the color ?

[Mr Initial Man]

Oh. Yes. That.

Please don't laugh.

colour_names.js

var $col_names = {AliceBlue:['F0F8FF','hsl(208,100%,97%)'],AntiqueWhite:['FAEBD7','hsl(34,78%,91%)'],Aqua:['00FFFF','hsl(180,100%,50%)'],Aquamarine:['7FFFD4','hsl(160,100%,75%)'],Azure:['F0FFFF','hsl(180,100%,97%)'],Beige:['F5F5DC','hsl(60,56%,91%)'],Bisque:['FFE4C4','hsl(33,100%,88%)'],Black:['000000','hsl(0,0%,0%)'],BlanchedAlmond:['FFEBCD','hsl(36,100%,90%)'],Blue:['0000FF','hsl(240,100%,50%)'],BlueViolet:['8A2BE2','hsl(271,76%,53%)'],Brown:['A52A2A','hsl(0,59%,41%)'],BurlyWood:['DEB887','hsl(34,57%,70%)'],CadetBlue:['5F9EA0','hsl(182,25%,50%)'],Chartreuse:['7FFF00','hsl(90,100%,50%)'],Chocolate:['D2691E','hsl(25,75%,47%)'],Coral:['FF7F50','hsl(16,100%,66%)'],CornflowerBlue:['6495ED','hsl(219,79%,66%)'],Cornsilk:['FFF8DC','hsl(48,100%,93%)'],Crimson:['DC143C','hsl(348,83%,47%)'],Cyan:['00FFFF','hsl(180,100%,50%)'],DarkBlue:['00008B','hsl(240,100%,27%)'],DarkCyan:['008B8B','hsl(180,100%,27%)'],DarkGoldenRod:['B8860B','hsl(43,89%,38%)'],DarkGray:['A9A9A9','hsl(0,0%,66%)'],DarkGreen:['006400','hsl(120,100%,20%)'],DarkGrey:['A9A9A9','hsl(0,0%,66%)'],DarkKhaki:['BDB76B','hsl(56,38%,58%)'],DarkMagenta:['8B008B','hsl(300,100%,27%)'],DarkOliveGreen:['556B2F','hsl(82,39%,30%)'],DarkOrange:['FF8C00','hsl(33,100%,50%)'],DarkOrchid:['9932CC','hsl(280,61%,50%)'],DarkRed:['8B0000','hsl(0,100%,27%)'],DarkSalmon:['E9967A','hsl(15,72%,70%)'],DarkSeaGreen:['8FBC8F','hsl(120,25%,65%)'],DarkSlateBlue:['483D8B','hsl(248,39%,39%)'],DarkSlateGray:['2F4F4F','hsl(180,25%,25%)'],DarkSlateGrey:['2F4F4F','hsl(180,25%,25%)'],DarkTurquoise:['00CED1','hsl(181,100%,41%)'],DarkViolet:['9400D3','hsl(282,100%,41%)'],DeepPink:['FF1493','hsl(328,100%,54%)'],DeepSkyBlue:['00BFFF','hsl(195,100%,50%)'],DimGray:['696969','hsl(0,0%,41%)'],DimGrey:['696969','hsl(0,0%,41%)'],DodgerBlue:['1E90FF','hsl(210,100%,56%)'],FireBrick:['B22222','hsl(0,68%,42%)'],FloralWhite:['FFFAF0','hsl(40,100%,97%)'],ForestGreen:['228B22','hsl(120,61%,34%)'],Fuchsia:['FF00FF','hsl(300,100%,50%)'],Gainsboro:['DCDCDC','hsl(0,0%,86%)'],GhostWhite:['F8F8FF','hsl(240,100%,99%)'],Gold:['FFD700','hsl(51,100%,50%)'],GoldenRod:['DAA520','hsl(43,74%,49%)'],Gray:['808080','hsl(0,0%,50%)'],Green:['008000','hsl(120,100%,25%)'],GreenYellow:['ADFF2F','hsl(84,100%,59%)'],Grey:['808080','hsl(0,0%,50%)'],HoneyDew:['F0FFF0','hsl(120,100%,97%)'],HotPink:['FF69B4','hsl(330,100%,71%)'],IndianRed:['CD5C5C','hsl(0,53%,58%)'],Indigo:['4B0082','hsl(275,100%,25%)'],Ivory:['FFFFF0','hsl(60,100%,97%)'],Khaki:['F0E68C','hsl(54,77%,75%)'],Lavender:['E6E6FA','hsl(240,67%,94%)'],LavenderBlush:['FFF0F5','hsl(340,100%,97%)'],LawnGreen:['7CFC00','hsl(90,100%,49%)'],LemonChiffon:['FFFACD','hsl(54,100%,90%)'],LightBlue:['ADD8E6','hsl(195,53%,79%)'],LightCoral:['F08080','hsl(0,79%,72%)'],LightCyan:['E0FFFF','hsl(180,100%,94%)'],LightGoldenRodYellow:['FAFAD2','hsl(60,80%,90%)'],LightGray:['D3D3D3','hsl(0,0%,83%)'],LightGreen:['90EE90','hsl(120,73%,75%)'],LightGrey:['D3D3D3','hsl(0,0%,83%)'],LightPink:['FFB6C1','hsl(351,100%,86%)'],LightSalmon:['FFA07A','hsl(17,100%,74%)'],LightSeaGreen:['20B2AA','hsl(177,70%,41%)'],LightSkyBlue:['87CEFA','hsl(203,92%,75%)'],LightSlateGray:['778899','hsl(210,14%,53%)'],LightSlateGrey:['778899','hsl(210,14%,53%)'],LightSteelBlue:['B0C4DE','hsl(214,41%,78%)'],LightYellow:['FFFFE0','hsl(60,100%,94%)'],Lime:['00FF00','hsl(120,100%,50%)'],LimeGreen:['32CD32','hsl(120,61%,50%)'],Linen:['FAF0E6','hsl(30,65%,94%)'],Magenta:['FF00FF','hsl(300,100%,50%)'],Maroon:['800000','hsl(0,100%,25%)'],MediumAquaMarine:['66CDAA','hsl(160,51%,60%)'],MediumBlue:['0000CD','hsl(240,100%,40%)'],MediumOrchid:['BA55D3','hsl(288,59%,58%)'],MediumPurple:['9370D8','hsl(260,57%,64%)'],MediumSeaGreen:['3CB371','hsl(147,50%,47%)'],MediumSlateBlue:['7B68EE','hsl(249,80%,67%)'],MediumSpringGreen:['00FA9A','hsl(157,100%,49%)'],MediumTurquoise:['48D1CC','hsl(178,60%,55%)'],MediumVioletRed:['C71585','hsl(322,81%,43%)'],MidnightBlue:['191970','hsl(240,64%,27%)'],MintCream:['F5FFFA','hsl(150,100%,98%)'],MistyRose:['FFE4E1','hsl(6,100%,94%)'],Moccasin:['FFE4B5','hsl(38,100%,85%)'],NavajoWhite:['FFDEAD','hsl(36,100%,84%)'],Navy:['000080','hsl(240,100%,25%)'],OldLace:['FDF5E6','hsl(39,85%,95%)'],Olive:['808000','hsl(60,100%,25%)'],OliveDrab:['6B8E23','hsl(80,60%,35%)'],Orange:['FFA500','hsl(39,100%,50%)'],OrangeRed:['FF4500','hsl(16,100%,50%)'],Orchid:['DA70D6','hsl(302,59%,65%)'],PaleGoldenRod:['EEE8AA','hsl(55,67%,80%)'],PaleGreen:['98FB98','hsl(120,93%,79%)'],PaleTurquoise:['AFEEEE','hsl(180,65%,81%)'],PaleVioletRed:['D87093','hsl(340,57%,64%)'],PapayaWhip:['FFEFD5','hsl(37,100%,92%)'],PeachPuff:['FFDAB9','hsl(28,100%,86%)'],Peru:['CD853F','hsl(30,59%,53%)'],Pink:['FFC0CB','hsl(350,100%,88%)'],Plum:['DDA0DD','hsl(300,47%,75%)'],PowderBlue:['B0E0E6','hsl(187,52%,80%)'],Purple:['800080','hsl(300,100%,25%)'],Red:['FF0000','hsl(0,100%,50%)'],RosyBrown:['BC8F8F','hsl(0,25%,65%)'],RoyalBlue:['4169E1','hsl(225,73%,57%)'],SaddleBrown:['8B4513','hsl(25,76%,31%)'],Salmon:['FA8072','hsl(6,93%,71%)'],SandyBrown:['F4A460','hsl(28,87%,67%)'],SeaGreen:['2E8B57','hsl(146,50%,36%)'],SeaShell:['FFF5EE','hsl(25,100%,97%)'],Sienna:['A0522D','hsl(19,56%,40%)'],Silver:['C0C0C0','hsl(0,0%,75%)'],SkyBlue:['87CEEB','hsl(197,71%,73%)'],SlateBlue:['6A5ACD','hsl(248,53%,58%)'],SlateGray:['708090','hsl(210,13%,50%)'],SlateGrey:['708090','hsl(210,13%,50%)'],Snow:['FFFAFA','hsl(0,100%,99%)'],SpringGreen:['00FF7F','hsl(150,100%,50%)'],SteelBlue:['4682B4','hsl(207,44%,49%)'],Tan:['D2B48C','hsl(34,44%,69%)'],Teal:['008080','hsl(180,100%,25%)'],Thistle:['D8BFD8','hsl(300,24%,80%)'],Tomato:['FF6347','hsl(9,100%,64%)'],Turquoise:['40E0D0','hsl(174,72%,56%)'],Violet:['EE82EE','hsl(300,76%,72%)'],Wheat:['F5DEB3','hsl(39,77%,83%)'],White:['FFFFFF','hsl(0,0%,100%)'],WhiteSmoke:['F5F5F5','hsl(0,0%,96%)'],Yellow:['FFFF00','hsl(60,100%,50%)'],YellowGreen:['9ACD32','hsl(80,61%,50%)']};
var $valid_cols = new Array('Aqua','Black','Blue','Fuchsia','Gray','Green','Lime','Maroon','Navy','Olive','Orange','Purple','Red','Silver','Teal','White','Yellow'); 

In hsl.js, I have:

var $clnames = new Object();

for(var $c in $col_names){
    if(!$clnames[$col_names[$c][1]]){
        $clnames[$col_names[$c][1]] = $c;
    } else {
        $clnames[$col_names[$c][1]] = $clnames[$col_names[$c][1]] + ', ' + $c;
    }
}

// ...

var $col_name = '---';

var $name_hsl = ('hsl(' + 
    ((($hsl.Sat[0] > 0) && ($hsl.Lit[0] > 0) && ($hsl.Lit[0] < 100))?$hsl.Hue[0]:'0') + ',' + 
    ((($hsl.Lit[0] > 0) && ($hsl.Lit[0] < 100))?$hsl.Sat[0]:'0')  + '%,' + $hsl.Lit[0]+'%' + 
')');

if($clnames[$name_hsl]){$col_name = $clnames[$name_hsl];}

// ...

if($col_name == '---'){ // If no name matches, approximate RGB/Hex values will do
    if($color_code.match('rgb')){
        $rgb_code = $color_code;
        var $rgb_splt = $rgb_code.replace('rgb(','').replace(')','').split(', ');
        $hex_code = ('#' + 
            ((Number($rgb_splt[0]) < 16)? '0':'') +  Number($rgb_splt[0]).toString(16) + 
            ((Number($rgb_splt[1]) < 16)? '0':'') +  Number($rgb_splt[1]).toString(16) + 
            ((Number($rgb_splt[2]) < 16)? '0':'') +  Number($rgb_splt[2]).toString(16)
        ).toUpperCase();
    }else if ($color_code.match('#')){
        $hex_code = $color_code;
        $rgb_code = 'rgb(' + parseInt($hex_code.substr(1,2), 16) + ',' + parseInt($hex_code.substr(3,2), 16) + ',' + parseInt($hex_code.substr(5,2), 16) + ')';
    }
} else { // If there IS a name, get the Hex Code assigned to that name in $col_names.
    $hex_code = '#' + $col_names[$col_name.split(', ')[0]][0];
    $rgb_code = 'rgb(' + parseInt($hex_code.substr(1,2), 16) + ',' + parseInt($hex_code.substr(3,2), 16) + ',' + parseInt($hex_code.substr(5,2), 16) + ')';
}
document.getElementById('Col_Code_RGB').firstChild.data = $rgb_code;
document.getElementById('Col_Code_Hex').firstChild.data = $hex_code; 

[Troy III]

damn, that's huge and ugly...
I never liked HSL but here is my simple rgb2hex and hex2rgb spartan conversion set:
[might prove useful, at least in some other more pragmatic coding situations and perhaps simplify/shorten your existing code a bit]

Color={/*b.b Troy III p.a.e*/
    rgb2hex:function(x,i){x=x.match(/\d+/g);for(i in x)x[i]=(+x[i]).toString(16);return"#"+x.join("")},
    hex2rgb:function(x,i){x=x.match(/[a-z0-9]{2,2}/gi);for(i in x)x[i]=parseInt("0x"+x[i]);return"rgb("+x+")"}}

And perhaps I'll come up with similar hsl solution
...later, -if I manage to absolve how and if hsl corresponds to some similar equivalent.

[Mr Initial Man]

And if all else fails, learn yourself some color theory and write your own implementation:
http://en.wikipedia.org/wiki/HSL_and_HSV

I think I shall do just that.

First up, hue - RGB (assuming 100% Saturation and 50% lightness)

        /*  Calculate RGB from Hue */
        var $r_val = 0;
        var $g_val = 0;
        var $b_val = 0;
        var $hue_adg = 256/60;
        
        /* --  Primary Ranges  -- */
        if($hsl.Hue[0] >= 300 || $hsl.Hue[0] <=  60){$r_val = 255;} //  Red
        if($hsl.Hue[0] >= 60  && $hsl.Hue[0] <= 180){$g_val = 255;} //  Green
        if($hsl.Hue[0] >= 180 && $hsl.Hue[0] <= 300){$b_val = 255;} //  Blue
        
        /* --  Primary - Secondary Ranges  -- */
        if($hsl.Hue[0] >   0 && $hsl.Hue[0] <  60){$g_val =         $hsl.Hue[0]        * $hue_adg ;} //  Red - Yellow 
        if($hsl.Hue[0] >  60 && $hsl.Hue[0] < 120){$r_val = 255 - (($hsl.Hue[0] -  60) * $hue_adg);} //  Yellow - Green 
        if($hsl.Hue[0] > 120 && $hsl.Hue[0] < 180){$b_val =        ($hsl.Hue[0] - 120) * $hue_adg ;} //  Green - Cyan 
        if($hsl.Hue[0] > 180 && $hsl.Hue[0] < 240){$g_val = 255 - (($hsl.Hue[0] - 180) * $hue_adg);} //  Cyan - Blue 
        if($hsl.Hue[0] > 240 && $hsl.Hue[0] < 300){$r_val =        ($hsl.Hue[0] - 240) * $hue_adg ;} //  Blue - Magenta 
        if($hsl.Hue[0] > 300 && $hsl.Hue[0] < 360){$b_val = 255 - (($hsl.Hue[0] - 300) * $hue_adg);} //  Magenta - Red 
        
        
        document.getElementById('R_Test1').firstChild.data = $r_val;
        document.getElementById('G_Test1').firstChild.data = $g_val;
        document.getElementById('B_Test1').firstChild.data = $b_val;
        document.getElementById('R_Test2').firstChild.data = Math.floor($r_val);
        document.getElementById('G_Test2').firstChild.data = Math.floor($g_val);
        document.getElementById('B_Test2').firstChild.data = Math.floor($b_val);
    }