www.webdeveloper.com
Page 2 of 2 FirstFirst 12
Results 16 to 24 of 24

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

  1. #16
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,702
    Well, I have Hue and Saturation. I'll work on Lightness later.

    Oh, and... when going from HSV - RGB, close is good enough, isn't it?

    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
            
            
            /* --*-- Adjust For Saturation --*-- */
            
    var $sat_adj 128 * (- ($hsl.Sat[0] / 100));
            
            
    // Adjust Red
            
    if($r_val 128){$r_val -= $sat_adj;}
            if(
    $r_val 128){$r_val += $sat_adj;}
            
            
    // Adjust Green
            
    if($g_val 128){$g_val -= $sat_adj;}
            if(
    $g_val 128){$g_val += $sat_adj;}
            
            
    // Adjust Blue
            
    if($b_val 128){$b_val -= $sat_adj;}
            if(
    $b_val 128){$b_val += $sat_adj;}
            
            
    //Set Sat = Zero
            
    if($hsl.Sat[0]===0){
                
    $r_val 128;
                
    $g_val 128;
                
    $b_val 128;
            }

            
    /* --*-- Adjust For Lightness --*-- */
            
    if($hsl.Lit[0] < 50){
                
            } else {
            }
    //        var $light_adj
            
            
    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);
        } 

  2. #17
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    If you're at all interested, I've just added HSL support to the Color class I have in the works: http://staging.thepointless.com/js/color.js

    Currently written in a non-prototypal form, but could easily be changed if necessary. Also bear in mind, it's a quickly thrown together class intended for pretty simple (and pointless) purposes. Used like so:

    Creating Colors:
    PHP Code:
    // create colors using RGB values:
    var color = new Color(rgb);

    // or using CSS string in RGB, #, or HSL format.
    // color *names* like red, yellow, and pumpkinish-orange are not mapped
    var color = new Color(cssString);

    // these all work as expected
    var red = new Color(255,0,0);
    var 
    green = new Color("#00ff00");
    var 
    blue = new Color("hsl(240,100%,50%)");
    var 
    yellow = new Color("rgb(255,255,0)"); 
    Playing with colors:
    PHP Code:
    // you can blend two colors. the *pct* parameter determines how much
    // of the resulting color is taken from the *added_color*.
    // ** NOTE: this will blend colors in a manner that artists are more 
    // accustomed to. thus:
    var red = new Color(255,0,0);
    var 
    yellow = new Color(255,255,0);
    var 
    orange red.getBlendedColor(yellow0.5);
    var 
    red_orange red.getBlendedColor(yellow0.3);

    // and NOT what a programmer might expect:
    var red = new Color(255,0,0);
    var 
    green = new Color(0,255,0);
    var 
    not_yellow red.getBlendedColor(green0.5);
    not_yellow.toRGBString();  // yields "rgb(128,128,0)" 
    Getting color strings out of your Color class:
    PHP Code:
    // toString() is overridden to provide a CSS hex string
    document.getElementById('something').style.color color.toString();

    // but, you can also summon up the corresponding RGB and HSL strings
    // if it makes you happy -- or directly call for the HEX
    color.toRGBString();
    color.toHSLString(); 
    Jon Wire

    thepointless.com | rounded corner generator

    I agree with Apple. Flash is just terrible.

    Use CODE tags!

  3. #18
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    Oh, and because toString() called by default in String contexts, you should actually be able to avoid explicitly calling it out, if you wish, when you assign it to a CSS value. In other words, this should work:

    PHP Code:
    var red = new Color(200,0,0);
    document.body.style.background red


    And if you get confused and forget that red is already defined as a color, instead thinking you defined it as a CSS string, this should still work:
    PHP Code:
    var red_again = new Color(red);
    red_again.toRGBString(); // yields "rgb(200,0,0)" 
    Last edited by svidgen; 04-18-2012 at 12:13 PM.
    Jon Wire

    thepointless.com | rounded corner generator

    I agree with Apple. Flash is just terrible.

    Use CODE tags!

  4. #19
    Join Date
    Jan 2011
    Posts
    117
    Well, there's at least one important thing I've learned:
    The existing conversion formulas from RGB2HSL and v.v are not to be used in professional work.
    The error margins are to wide for that!

  5. #20
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    Quote Originally Posted by Troy III View Post
    Well, there's at least one important thing I've learned:
    The existing conversion formulas from RGB2HSL and v.v are not to be used in professional work.
    The error margins are to wide for that!
    Well, sort of. On the other hand, these notations theoretically originated out of a need in a professional setting, not from hobbyists with nothing better to do. So, despite having no perfect conversion formula, they're still going to be used in professional settings.

    And it's pretty widely known that color format conversions are imperfect. Even going from display format (RGB) to print format (CMY/RYB) is inaccurate.
    Jon Wire

    thepointless.com | rounded corner generator

    I agree with Apple. Flash is just terrible.

    Use CODE tags!

  6. #21
    Join Date
    Jan 2011
    Posts
    117
    but not the conversion process.
    professionals refuse to convert their sRGB source to HSL, HSV or similar they even try to avoid re-compression as much as possible.

    And in fact to me (speaking as a human) RGB color space is very strait forward and I can write rgb colors almost by hart and have no difficulties in understanding which color needs increase or decrease to get the exact nuance I'm going after. Something I was never comfortable doing in hsl.

    but when printing there are calibration procedures involved and we are all aware that light and print are completely different mediums.

  7. #22
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    Quote Originally Posted by Troy III View Post
    but not the conversion process.
    professionals refuse to convert their sRGB source to HSL, HSV or similar they even try to avoid re-compression as much as possible.

    And in fact to me (speaking as a human) RGB color space is very strait forward and I can write rgb colors almost by hart and have no difficulties in understanding which color needs increase or decrease to get the exact nuance I'm going after. Something I was never comfortable doing in hsl.

    but when printing there are calibration procedures involved and we are all aware that light and print are completely different mediums.
    CS pros certainly tend towards RGB. Though HSL, as I understand it, is designed to make color selection more intuitive for the graphics pros. And I must admit, finding a color with an HSL tool like Mr Initial Man's is much simpler and more intuitive than trying to zero in on the RGB values, even having used RGB for 13+ years.

    Also notable, HSL corresponds directly to the actual color spectrum. RGB doesn't correspond directly to anything. The conversions that RGB vectors undergo prior to being displayed are ironically much more magical and impure than the conversion from [anything] to RGB. The RGB components in data aren't similarly proportional to the RGB pixel intensities on screen.

    And that's the reason you had to type sRGB instead of just RGB. The "pure" RGB values are mapped to the latest set of tables and curves agreed upon by most computer hardware and software vendors. First comes the definition of the gamut, followed by the physical translation of component values into actual intensities, which I'm led to believe is not a linear process.

    HSL to RGB is much more natural than that. The conversion is simple geometry. I might even dare to claim that its only real shortcoming is that the resulting RGB vector is pure. So, if you correctly intuit a color in HSL, you may not see what you expected: the "pure" color you get from the conversion is tainted during the conversion for RGB to ... a different RGB.


    ... Anywho. Yes. RGB should be used for internal color representation. HSL is primarily a representation for color selection.
    Jon Wire

    thepointless.com | rounded corner generator

    I agree with Apple. Flash is just terrible.

    Use CODE tags!

  8. #23
    Join Date
    Jan 2011
    Posts
    117
    I was expressing my thought and the lesson I've learned from watching how it is being achived and of course what the practical results are. And that the error margin of this conversion is not acceptable.

    I was using the "sRGB" because it is equal to computer monitor range and deeper than that of a normal consumer TV or to be more precise because it is the most widely used Standard today.

    (you may skip this) Otherwise from the human point of view (as I'm not a robot either), I think that rgb2hsl is not only inaccurate but that hsl in it self is somewhat dumb.

    The dumb part comes as a result of a wrong concept evolved out of the poor understanding of RGB component notions. Since RGB component is a color in itself their numerical scale represents the luma/intensity not some color saturation type of thing. Even when at 0, the R (red) component is fully red "fully saturated".

    Rising R doesn't mean you are saturating this channel. Because there is no such thing as saturation. It's a concept and it's a wrong one. In fact all concepts are either arbitrary, subjective or simply wrong.

    Cant saturate scalar values. The color of a silver comes from the particular quality of its surface which reflects all three colors at the same intensity. Not that its reflection is "de-saturated". Moreover it's a visual noise. But thankfully it is evenly distributed and perhaps pleasant to watch. Therefore lowering the "saturation" scale, which will be acting on rgb will in fact rise (two other) lower components (of rgb) to the level of the leading one, which consequentially completely disables the H component of the HSL system. The selected angular color will have no effect on the outcome. Rising the "saturation" on the other hand will simply increase the existing diferences [deltas] of the current rgb.

    Also the so called luminance is dubious rising the luminosity will cause the rise of intensity of all all three in parallel which conditionally will either introduce clipping (out of gamut) noise [which by the way becomes audible on the reciver (quite loud and irritating)] or if clamped will cause errors : modify the affected/selected color. But the dumbest part of it all is that when rising the L to 100% the color becomes white.

    55 is equal to the maximum output of the emitting device. Whereas in real world the intensity of the color is unlimited. It depends on the quanta of photons of the given wavelength reaching your senses.

    Or all I'm saying is that the conversion formulas being used have to many passes of rounding errors. And the main problem is the narrowness of only 360 steps for all three colors, in fact of the full color range which makes the conversion precision even harder and approximate. Even though I still believe that there could be a better conversion method waiting to be discovered.

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

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