HSL - RGB/Hex Script: Done!

[Mr Initial Man]

I have finished a very lengthy script that converts HSL notation to RGB notation.

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'); 

Excerpts from hsl.js

var $hsl = {
    Hue:[0,0],
    Sat:[100,1],
    Lit:[50,2]
}// [0] is the value, [1] is the order they are in (used with a split() method)

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;}
}//Create list of HSL codes and corresponding names

// ...
if($col_name == '---'){ // The calculation is used if the HSL code does *not* correspond to a named colour.
    /* -- 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
    
    
    /* -- Adjust For Saturation -- */
    var $sat_adj = 128 * (1 - ($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 -- */
    var $lit_adg = (256 * (50 - $hsl.Lit[0]) * 0.02) - 1;
    
    if($hsl.Lit[0] < 50){
        
        $r_val = $r_val - ($lit_adg * (($r_val)/255));
        $g_val = $g_val - ($lit_adg * (($g_val)/255));
        $b_val = $b_val - ($lit_adg * (($b_val)/255));
        
        if($r_val < 0){$r_val = 0;}
        if($g_val < 0){$g_val = 0;}
        if($b_val < 0){$b_val = 0;}

        if($r_val > 255){$r_val = 255;}
        if($g_val > 255){$g_val = 255;}
        if($b_val > 255){$b_val = 255;}
    }
    if($hsl.Lit[0] > 50){
        $lit_adg = -($lit_adg) - 1;
        $r_val = $r_val + ($lit_adg * ((255 - $r_val)/255));
        $g_val = $g_val + ($lit_adg * ((255 - $g_val)/255));
        $b_val = $b_val + ($lit_adg * ((255 - $b_val)/255));
        
        if($r_val > 255){$r_val = 255;}
        if($g_val > 255){$g_val = 255;}
        if($b_val > 255){$b_val = 255;}
    }
    
    $r_val = Math.floor($r_val);
    $g_val = Math.floor($g_val);
    $b_val = Math.floor($b_val);
    
    $rgb_code = 'rgb(' + $r_val + ',' + $g_val + ',' + $b_val + ')';
    $hex_code = ('#' + 
        (($r_val < 16)? '0':'') +  $r_val.toString(16) + 
        (($g_val < 16)? '0':'') +  $g_val.toString(16) + 
        (($b_val < 16)? '0':'') +  $b_val.toString(16)
    ).toUpperCase();
} else {//If an hsl code correspond to a colour name, $col_names is referenced via $clnames and the named color's assigned Hex/RGB value is used instead of the calculated code (as HSL and Hex/RGB codes don't quite line up).
    $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) + ')';
} 

Page here: http://www.mrinitialman.com/Books/HTML/hsl-html5.html

[svidgen]

It didn't occur to me before, but you prefix all your (non-function) variable names with a $.

... Interesting.


Gratz on getting your page done. Did you take a peek at my color class?

[Troy III]

It didn't occur to me before, but you prefix all your (non-function) variable names with a $.

... Interesting.

A guy once asked:

I see in many places a $ sign before variable names in javascript. What does that $ sign mean?
For ex: i have say like below mentioned code:

Fact_Class.prototype.intz=function($n){} 

What does the $ symbol before variable 'n' signify there? Can anyone explain?

Thanks,

My answer was

$ and _
are two (and only) non-alpha characters that don't have any special or reserved meaning in js and are safe for use in names or for names as single char pointers or as leading ones. So the choice is more like a matter of convenience -using $ or _ as a single char pointer is less likely to be overwritten spontaneously by the coder compared to other regular letters like s, o, e or i. Yet, more procedural coders will $name or _name for reading semantics where $name would indicate that: it's a name of a string value and/or _name to be some sub-property object or a derivative of some other higher level object etc.
They are left in reserve by the language, but with all the guys fleeing from static languages (and who until recently openly despised the live or dynamic script) yet being heard and having their say in js standards -who knows what future might bring.

But in a language like what Live Script is,- it's not such a good idea after all. "$name" might turn into a number object or an array or get reassigned to some other completely different type of a value instantly, and its mark will become misleading - making it completely inappropriate which in turn also makes your code look ugly and obscure as if suffering from some alien pest attack, rapidly loosing its purposed meaning.

[svidgen]

The notion of using $ to designate a string is intriguing. That sort of flies in the face of the general pattern in web development, .NET aside, of loose typing.

While I haven't really settled on a pattern, I think I tend to use $ for "general utility" methods and "magic" variables. And I guess I tend to inappropriately use underscores for variables in "included" scripts -- secondaryish scripts that get included on a small variety of pages that may potentially contain other scripts. Yes, I should be using closures or some other scope control instead ... but I generally don't ...

Anywho, I just found the $ prefix interesting, and figured it was probably a PHP habit.

.. Didn't so much expect a philosophical discourse on the matter.

[Troy III]

The notion of using $ to designate a string is intriguing. That sort of flies in the face of the general pattern in web development, .NET aside, of loose typing.

While I haven't really settled on a pattern, I think I tend to use $ for "general utility" methods and "magic" variables. And I guess I tend to inappropriately use underscores for variables in "included" scripts -- secondaryish scripts that get included on a small variety of pages that may potentially contain other scripts. Yes, I should be using closures or some other scope control instead ... but I generally don't ...

Anywho, I just found the $ prefix interesting, and figured it was probably a PHP habit.

.. Didn't so much expect a philosophical discourse on the matter.

Well, there it is, but you can always disregard it.

"php habit" is in fact inherited from other quite a bit older static languages.

As already mentioned, it's a coder idiom and completely meaningless in JavaScript, although it can carry out some human readable significance, its semiotics is rather arbitrary and varies from coder to coder as randomly as one can expect. Everybody will attach some particular meaning of his own to them and they are free to do so, for as long as they don't become a part of language reserved characters.

[svidgen]

"php habit" is in fact inherited from other quite a bit older static languages.

As already mentioned, it's a coder idiom and completely meaningless in JavaScript, although it can carry out some human readable significance, its semiotics is rather arbitrary and varies from coder to coder as randomly as one can expect. Everybody will attach some particular meaning of his own to them and they are free to do so, for as long as they don't become a part of language reserved characters.

At the risk of triggering another unprompted lecture on sigils ... Yes, PHP is a derivative language, like most. One would naturally expect its conventions to follow those of its influencers. But, it wasn't from writing Perl that the habit was acquired. Nor was it from writing shell script or BASIC. It was from writing PHP.

And while I thought it might be possible that the OP had assigned some meaning to them, please note that I merely expressed my interest in his use of the prefix (not technically a sigil in JS). I did not beckon anyone for a lecture on the historical use of sigils ...

[Mr Initial Man]

PHP habit.

And yes, I did. I also used the way my script USED to work to figure out what the values should be--basically, working out a calculation that put the R, G, B numbers sort of where document.defaultView.generatedStyle (or whatever it was) said they should be. I got it within a error margin of 2, which is why in the colour names, it displays the defined RGB/Hex instead of the calculated one.

[svidgen]

Margin of error? What sort of error!?

There should be no errors ...

[Mr Initial Man]

Simple: Does hsl(219,14%,53%) correspond with #778899 or #778897?

Answer: yes.

[svidgen]

Neither, according to both Chrome and my Color class: #768298

At the Chrome console line:

> document.body.style.background = "hsl(219,14%,53%)";
"hsl(219,14%,53%)"
> document.body.style.background;
"rgb(118, 130, 152)"
> var blah = new Color("hsl(219,14%,53%)");
undefined
> blah.toString();
"#768298"
> blah.toRGBString();
"rgb(118,130,152)"

ADDENDUM:

Firefox clearly uses floor() instead of round(). But still only differs by 1. At the FF console:

[12:02:48.307] document.body.style.background = "hsl(219,14%,53%)";
[12:02:48.310] "hsl(219,14%,53%)"
--
[12:02:55.006] document.body.style.background;
[12:02:55.008] "none repeat scroll 0% 0% rgb(118, 130, 151)"

Where'd you get the hex codes you posted?

[svidgen]

Oh wait .. I think I see. You meant hsl(210,14%,53%).

[Mr Initial Man]

Oh wait .. I think I see. You meant hsl(210,14%,53%).

Whoops. Yes. Um, typo. It's the HSL code for LightSlateGray

[007Julien]

Very interesting, some people could think that the English speakers argued only with the money ?

[Troy III]

That's your opinion, and I respect that - not that I expect the same in return.
It's just the way I publish.
I'll feel free to disregard your last posts as generally irrelevant. But I thank you for the "signils".
Feel free to do the same.

p.s.: your 'hsl' is returning (H,NaN,L) occasionally...

[svidgen]

p.s.: your 'hsl' is returning (H,NaN,L) occasionally...

I'd certainly buy that. And I'll get it fixed for you right away! Thanks.

(And I also thank you for refraining from lecturing us on the history and significance of NaN in JavaScript.)