www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 24

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

  1. #1
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,714

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

    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.

  2. #2
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    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
    Jon Wire

    thepointless.com | rounded corner generator

    I agree with Apple. Flash is just terrible.

    Use CODE tags!

  3. #3
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,714
    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.

  4. #4
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    Whelp. The alternative is to perform the conversion yourself: http://www.cs.rit.edu/~ncs/color/t_convert.html
    Jon Wire

    thepointless.com | rounded corner generator

    I agree with Apple. Flash is just terrible.

    Use CODE tags!

  5. #5
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    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
    Jon Wire

    thepointless.com | rounded corner generator

    I agree with Apple. Flash is just terrible.

    Use CODE tags!

  6. #6
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,714
    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.

  7. #7
    Join Date
    Jan 2011
    Posts
    117
    Quote Originally Posted by Mr Initial Man View Post
    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.

  8. #8
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    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 .. )
    Jon Wire

    thepointless.com | rounded corner generator

    I agree with Apple. Flash is just terrible.

    Use CODE tags!

  9. #9
    Join Date
    Jan 2011
    Posts
    117
    Quote Originally Posted by Mr Initial Man View Post
    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".

  10. #10
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,714
    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."
    Last edited by Mr Initial Man; 04-17-2012 at 02:00 PM.

  11. #11
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    Gratz.
    Jon Wire

    thepointless.com | rounded corner generator

    I agree with Apple. Flash is just terrible.

    Use CODE tags!

  12. #12
    Join Date
    Jan 2011
    Posts
    117
    Quote Originally Posted by Mr Initial Man View Post
    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 ?

  13. #13
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,714
    Oh. Yes. That.

    Please don't laugh.

    colour_names.js

    PHP Code:
    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:

    PHP Code:
    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

  14. #14
    Join Date
    Jan 2011
    Posts
    117
    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]


    Code:
    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.

  15. #15
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,714
    Quote Originally Posted by svidgen View Post
    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&#37; Saturation and 50% lightness)


    PHP Code:
            /*  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] >   && $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);
        } 
    Last edited by Mr Initial Man; 04-18-2012 at 03:22 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles