ÿþ<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="en-US" xml:lang="en-US" > <head> <title>Color Selection</title> <meta name="AUTHOR" content="Wilson Mar, 310.320-7878"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="web, development, tools"> <meta name="description" content="Wilson's Color selector"> <link rel="Shortcut Icon" type="image/x-icon" href="/favicon.ico" /> <link rel="stylesheet" href="http://merc.tv/global.css" type="text/css"> <script language="javascript" src="http://merc.tv/common.js"></script> <script language="javascript"><!-- // Based on http://www.draac.com/colorconvert.html function initializer(){ hexidec=new makeArray(1); } function makeArray(n){ this.length = n; for (var i=1; i<=n;i++) this[i]=0; return this; } function getColor(form){ form.hexadecimal.value=document.bgColor; rgb=form.hexadecimal.value; c="0123456789abcdef"; red=c.indexOf(rgb.substring(1,2))*16+c.indexOf(rgb.substring(2,3)); green=c.indexOf(rgb.substring(3,4))*16+c.indexOf(rgb.substring(4,5)); blue=c.indexOf(rgb.substring(5,6))*16+c.indexOf(rgb.substring(6,7)); form.red.value=red; form.green.value=green; form.blue.value=blue; form.hexadecimal.focus(); form.hexadecimal.select(); document.bgColor=form.hexadecimal.value; } function getHex(form){ var c="0123456789abcdef"; if ((form.red.value >255) || (form.green.value > 255) || (form.blue.value > 255)){ window.alert("What colors are you trying to convert? Value: 0 to 255!") }else{ red=form.red.value; green=form.green.value; blue=form.blue.value; with (Math) { numOne=c.substring(floor(red/16),floor(red/16)+1); numTwo=c.substring(red%16,(red%16)+1); numThree=c.substring(floor(green/16),floor(green/16)+1); numFour=c.substring(green%16,(green%16)+1); numFive=c.substring(floor(blue/16),floor(blue/16)+1); numSix=c.substring(blue%16,(blue%16)+1); } form.hexadecimal.value="#"+numOne+""+numTwo+""+numThree+""+numFour+""+numFive+""+numSix; form.red.focus(); form.red.select(); document.bgColor=form.hexadecimal.value; form.hexadecimal.focus(); form.hexadecimal.select(); } } function getRGB(form){ hex=form.hexadecimal.value; pound=0; for (i=0;i<7;i++){ hexidec[i]=hex.charAt(i); temp=hexidec[i]; if (temp=='#') pound++; if ((temp=='a')||(temp=='A')) hexidec[i]=10; if ((temp=='b')||(temp=='B')) hexidec[i]=11; if ((temp=='c')||(temp=='C')) hexidec[i]=12; if ((temp=='d')||(temp=='D')) hexidec[i]=13; if ((temp=='e')||(temp=='E')) hexidec[i]=14; if ((temp=='f')||(temp=='F')) hexidec[i]=15; } form.red.value=((hexidec[0+pound]*16)- -hexidec[1+pound]); form.green.value=((hexidec[2+pound]*16)- -hexidec[3+pound]); form.blue.value=((hexidec[4+pound]*16)- -hexidec[5+pound]); document.bgColor=form.hexadecimal.value; } function getHSL(form){ hex=form.hexadecimal.value; pound=0; for (i=0;i<7;i++){ hexidec[i]=hex.charAt(i); temp=hexidec[i]; if (temp=='#') pound++; if ((temp=='a')||(temp=='A')) hexidec[i]=10; if ((temp=='b')||(temp=='B')) hexidec[i]=11; if ((temp=='c')||(temp=='C')) hexidec[i]=12; if ((temp=='d')||(temp=='D')) hexidec[i]=13; if ((temp=='e')||(temp=='E')) hexidec[i]=14; if ((temp=='f')||(temp=='F')) hexidec[i]=15; } // Based on http://www.artofwebdesign.net/colour/hsltorgb.php // http://en.wikipedia.org/wiki/HSL_color_space // http://www.hypermedic.com/color/colorspaceconversions.php // and http://homepages.cwi.nl/~steven/css/hsl.html r=((hexidec[0+pound]*16)- -hexidec[1+pound])/255; g=((hexidec[2+pound]*16)- -hexidec[3+pound])/255; b=((hexidec[4+pound]*16)- -hexidec[5+pound])/255; min=Math.min(r,Math.min(b,g)); max=Math.max(r,Math.max(b,g)); mmm=max-min; mpm=max+min; lumx=(mpm/2)*100; // window.alert(" r="+r+" g="+g+" b="+b+" lumx="+lumx ); if(max==min){ h=0; s=0; }else{ if(lumx>0.5){ s=mpm; }else{ s=2-mmm; } if(max==g){ h=120+(60*((b-r)/mmm)); }else if(max==b){ h=240+(60*((r-g)/mmm)); }else{ // max==r if(g<b){ h=360+(60*((g-b)/mmm)); }else{ // g>=b h=60*((g-b)/mmm); } } } // window.alert( "mpm="+mpm+"luxm="+luxm+"max="+max+"min="+min ); form.hue.value=Math.round(h); form.sat.value=Math.round(s); form.lum.value=Math.round(lumx); /* HOW TO RETURN hue.to.rgb(m1, m2, h): IF h<0: PUT h+1 IN h IF h>1: PUT h-1 IN h IF h*6<1: RETURN m1+(m2-m1)*h*6 IF h*2<1: RETURN m2 IF h*3<2: RETURN m1+(m2-m1)*(2/3-h)*6 RETURN m1 HOW TO RETURN hsl.to.rgb(h, s, l): SELECT: l<=0.5: PUT l*(s+1) IN m2 ELSE: PUT l+s-l*s IN m2 PUT l*2-m2 IN m1 PUT hue.to.rgb(m1, m2, h+1/3) IN r PUT hue.to.rgb(m1, m2, h ) IN g PUT hue.to.rgb(m1, m2, h-1/3) IN b RETURN (r, g, b) */ } //--> </SCRIPT> </head> <body onLoad="initializer()" bgcolor="#FFFFe0" topmargin="0" leftmargin="0" marginwidth="0" marginheigth="0" Text="#550000" link="blue" Vlink="#000088" Alink="red"> <bgsound id="sound"> <a name="TopMenu"></a> <table bgcolor="#FFFFe0" cellspacing="0" cellpadding="0" width="100%" border="0"><tr valign="top"><td width=80 bgcolor="#FFFFe0"> <a href="1service.htm" accesskey="G"><img src="http://merc.tv/img/wilson/wilson2007.jpg" width="60" height="80" alt="How I may help" hspace="0" /></a> <br /><a target="_blank" href="http://twitter.com/wilsonmar"><img src="http://twitter.com/favicon.ico" width="16" height="16" /></a><a target="_blank" href="http://www.linkedin.com/in/wilsonmar"><img src="http://merc.tv/img/icons/linkedin_16x16.gif" alt="LinkedIn Profile" width="16" height="16" /></a> <a href="#Feedback"><img src="http://merc.tv/img/sendmsg.gif" alt="Email me!" width="18" height="9" /></a><br /> <a href="skype:wilsonmar4?userinfo"><img src="http://merc.tv/img/logos/skype.png" width="16" height="16" alt="Call me using Skype client on your machine"></a> </td><td> <br /> <h1><a id="PageID" target="_top" href="http://www.wilsonmar.com/1colors.htm"><img title="Reload this page" src="http://merc.tv/img/thispage.gif" height=14 width=20 border="0"> Color Selection</a> </h1><p class="intro"> This <strong>For/Background Color Selector</strong> helps us quickly see how various background and font colors look with each other. </p><p> <li class="tool"></li> <a target="_blank" href="http://www.colorhunter.com/"> ColorHunter</a>: <a target="_blank" href="http://www.degraeve.com/color-palette/"> Get color numbers from a photo's URL</a>. <!-- p class="intro"> Run your cursor over a code to specify the color of your background. The colors that you see displayed are the colors that the codes produce when you put them in your HTML. --> <p> </td><td width="15">&nbsp; </td><td width=200><br /><p class="Topichead"> Topics this page:<br /> <li class="Itemsep"><a class="TopicChoice" href="#AboutColors"> RGB My Eye</a></li> <li class="Itemsep"><a class="TopicChoice" href="#ColorNamez"> Color Names</a></li> <li class="Itemsep"><a class="TopicChoice" href="#HexPickz"> Browser Safe Colors</a></li> <li class="Itemsep"><a class="TopicChoice" href="#Complementarz"> Complementary Colors</a></li> <li class="Itemsep"><a class="TopicChoice" href="#ColorRange"> Opposite Colors</a></li> <li class="Itemsep"><a class="TopicChoice" href="#ColorPickerz"> Color Pickers</a></li> <li class="Itemsep"><a class="TopicChoice" href="#Methods"> Programming Color</a></li> <nobr> <li class="Itemsep"><a class="TopicChoice" href="#Bottom"> Your <span style="text-decoration:underline">c</span>omments???</a></nobr></li> <p> </td><td width="15">&nbsp; </td><td width="185"><p align="right"><SPAN id="MenuText"> <a href="1likes.htm#Developer" accesskey="M">Site <span style="text-decoration:underline">M</span>ap <img alt="Go to a list of all pages on this sites" src="http://merc.tv/img/mainmenu.gif" width="16" border="0"></a><br /> <a href="1rules.htm" accesskey="I">About th<span style="text-decoration:underline">i</span>s site <img width=16 alt="About/Help on this site" src="http://merc.tv/img/ques.gif" border="0"></a><br /> <a href="#Topic1"><img align="right" alt="First Topic" border="0" src="http://merc.tv/img/wcdntri.gif" width="16" height="16"></a> </p><p align="left"> <!-- SiteSearch Google --> <form name="frmS" method="get" action="http://www.google.com/custom"><label for="keyword" accesskey="S"></label> <form method="get" action="http://www.google.com/custom" target="_top"> <table cellpadding="0" cellspacing="0" border="0" bgcolor="#FFFFe0"> <tr><td nowrap="nowrap" valign="top" align="left" height="32"> <br/> <input type="hidden" name="domains" value="www.wilsonmar.com"></input> <label for="sbi" style="display: none">Enter your search terms</label> <input type="text" name="q" size="10" maxlength="255" value="" id="sbi"></input> <label for="sbb" style="display: none">Submit search form</label> <input type="submit" name="sa" value="Search" id="sbb"></input> </td></tr> <tr valign="top"><td nowrap="nowrap"><table cellpadding="0" cellspacing="0"> <tr valign="top"><td> <input type="radio" name="sitesearch" value="" id="ss0"></input> <label for="ss0" title="Search the Web"><font size="-2" color="#000000">Web &nbsp;</font></label></td> <td> <input type="radio" name="sitesearch" value="wilsonmar.com" checked id="ss1"></input> <label for="ss1" title="Search wilsonmar.com"><font size="-2" color="#000000">WilsonMar.com</font></label> </td></tr></table> <input type="hidden" name="client" value="pub-1513434032794226"></input> <input type="hidden" name="forid" value="1"></input> <input type="hidden" name="ie" value="UTF-8"></input> <input type="hidden" name="oe" value="UTF-8"></input> <input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1"></input> <input type="hidden" name="hl" value="en"></input> </td></tr></table> </form><!-- SiteSearch Google --> </p><p> <div id="flags"><script language="JavaScript1.2" type="text/javascript"> common_write_translation_buttons('1colors.htm'); </script></div> </td></tr></table> <p align="center"> <script type="text/javascript"><!-- google_ad_client = "pub-1513434032794226"; google_alternate_color = "FFFFe0"; google_ad_width = 728; google_ad_height = 90; google_ad_format = "728x90_as"; google_ad_channel ="7426624388";google_language = 'en'; google_color_border = "FDFFCA"; google_color_bg = "FDFFCA"; google_color_link = "0000CC"; google_color_url = "008000"; google_color_text = "000000"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </p> <a name="Topic1"></a> <table border="0" bgcolor="#FFFFe0" width="100%" cellspacing="0" cellpadding="0"> <tr valign="top"><td rowspan="3" width="40">&nbsp;</td><td> <a name="ColorTool"></a> <a target="_blank" href="http://www.draac.com/colorconvert.html"><img src="http://merc.tv/img/rose.gif" border="0"></a> (Useless) assigned <a href="#ColorNamez">Color Name:</a><br /><font size="2"></font> </td><td>&nbsp; </td><td><font color="red" face="verdana" size="2"><strong>Red</strong></font> </td><td><font color="green" face="verdana" size="2"><strong>Green</strong></font> </td><td><font color="blue" face="verdana" size="2"><strong>Blue</strong></font> </td><td><a target="_blank" href="http://www.telacommunications.com/nutshell/rgbform.htm"> <img src="http://merc.tv/img/rose.gif"></a> </td><td align="left"><strong>Hex 6:</strong> </td><td align="left">&nbsp; </td><td align="left"><a href="#HSLz">Hue</a> </td><td align="left"><a href="#HSLz">Sat.</a> </td><td align="left"><a href="#HSLz">Lum.</a> </p> </ul> </td><td rowspan="3" width="40" align="center"> <a href="#TopMenu"><img alt="Go to top of page" border =0 src="http://merc.tv/img/topmenu.gif" width="22" height="22"></a> <br /> <a href="#TopMenu"><img border="0" src="http://merc.tv/img/wcuptri.gif" width="32" height="22"></a> <br /> <a href="#AboutColors"><img border="0" src="http://merc.tv/img/wcdntri.gif" width="40" height="23"></a> </td></tr> <tr valign="center"><td><FORM> <!-- Missing: <OPTION value="feldspar"> Feldspar - #D19275 </OPTION> <OPTION value="violetred"> Violet Red - #D02090 </OPTION> <OPTION value="orange"> Orange - #D02090 </OPTION> --> <SELECT name="colors" onChange="document.bgColor = form.colors.options[colors.selectedIndex].value"> <OPTION value="white" defaultSelected="true"></strong> White - #FFFFFF </OPTION> <OPTION value="aliceblue"> Alice Blue - #F0F8FF </OPTION> <OPTION value="antiquewhite"> Antique White - #FAEBD7 </OPTION> <OPTION value="aqua"> Aqua - #00FFFF - CSS1 </OPTION> <OPTION value="aquamarine"> Aquamarine - #7FFFD4 </OPTION> <OPTION value="azure"> Azure - #F0FFFF </OPTION> <OPTION value="beige"> Beige - #F5F5DC </OPTION> <OPTION value="bisque"> Bisque - #FFE4C4 </OPTION> <OPTION value="black"> Black - #000000 - CSS1 </OPTION> <OPTION value="blanchedalmond"> BlanchedAlmond - #FFEBCD </OPTION> <OPTION value="blue"> Blue - #0000FF - CSS1 </OPTION> <OPTION value="blueviolet"> Blue-Violet - #8A2BE2 </OPTION> <OPTION value="brown"> Brown - #A52A2A </OPTION> <OPTION value="burlywood"> Burlywood - #DEB887 </OPTION> <OPTION value="cadetblue"> Cadet Blue - #5F9EA0 </OPTION> <OPTION value="chartreuse"> Chartreuse - #7FFF00 </OPTION> <OPTION value="chocolate"> Chocolate - #D2691E </OPTION> <OPTION value="coral"> Coral - #FF7F50 </OPTION> <OPTION value="cornflowerblue"> Cornflower Blue - #6495ED </OPTION> <OPTION value="cornsilk"> Cornsilk - #FFF8DC </OPTION> <OPTION value="crimson"> Crimson - #DC143C </OPTION> <OPTION value="cyan"> Cyan - #00FFFF </OPTION> <OPTION value="darkblue"> Dark Blue - #00008B </OPTION> <OPTION value="darkcyan"> Dark Cyan - #008B8B </OPTION> <OPTION value="darkgoldenrod"> Dark Goldenrod - #B8860B </OPTION> <OPTION value="darkgray"> Dark Gray - #A9A9A9 </OPTION> <OPTION value="darkgreen"> Dark Green - #006400 </OPTION> <OPTION value="darkkhaki"> Dark Khaki - #BDB76B </OPTION> <OPTION value="darkmagenta"> Dark Magenta - #8B008B </OPTION> <OPTION value="darkolivegreen"> Dark Olive-Green - #556B2F </OPTION> <OPTION value="darkorange"> Dark Orange - #FF8C00 </OPTION> <OPTION value="darkorchid"> Dark Orchid - #9932CC </OPTION> <OPTION value="darkred"> Dark Red - #8B0000 </OPTION> <OPTION value="darksalmon"> Dark Salmon - #E9967A </OPTION> <OPTION value="darkseagreen"> Dark Sea Green - #8FBC8F </OPTION> <OPTION value="darkslateblue"> Dark Slate Blue - #483D8B </OPTION> <OPTION value="darkslategray"> Dark Slate Gray - #2F4F4F </OPTION> <OPTION value="darkturquoise"> Dark Turquoise - #00CED1 </OPTION> <OPTION value="darkviolet"> Dark Violet - #9400D3 </OPTION> <OPTION value="deeppink"> Deep Pink - #FF1493 </OPTION> <OPTION value="deepskyblue"> Deep Sky Blue - #00BFFF </OPTION> <OPTION value="dimgray"> Dim Gray - #696969 </OPTION> <OPTION value="dodgerblue"> Dodger Blue - #1E90FF </OPTION> <OPTION value="firebrick"> Firebrick - #B22222</OPTION> <OPTION value="floralwhite"> Floral White - #FFFAF0 </OPTION> <OPTION value="forestgreen"> Forest Green - #228B22 </OPTION> <OPTION value="fuchsia"> Fuchsia - #FF00FF - CSS1 </OPTION> <OPTION value="gainsboro"> Gainsboro - #DCDCDC </OPTION> <OPTION value="ghostwhite"> Ghost White - #F8F8FF </OPTION> <OPTION value="gold"> Gold - #FFD700 </OPTION> <OPTION value="goldenrod"> Goldenrod - #DAA520 </OPTION> <OPTION value="gray"> Gray - #808080 - CSS1 </OPTION> <OPTION value="green"> Green - #008000 - CSS1 </OPTION> <OPTION value="greenyellow"> Green-Yellow - #ADFF2F </OPTION> <OPTION value="honeydew"> Honeydew - #F0FFF0 </OPTION> <OPTION value="hotpink"> Hot Pink - #FF69B4 </OPTION> <OPTION value="indianred"> Indian Red - #CD5C5C </OPTION> <OPTION value="indigo"> Indigo - #4B0082 </OPTION> <OPTION value="ivory"> Ivory - #FFFFF0 </OPTION> <OPTION value="khaki"> Khaki - #F0E68C </OPTION> <OPTION value="lavender"> Lavender - #E6E6FA </OPTION> <OPTION value="lavenderblush"> Lavender-Blush - #FFF0F5 </OPTION> <OPTION value="lawngreen"> Lawn Green - #7CFC00 </OPTION> <OPTION value="lemonchiffon"> Lemon Chiffon - #FFFACD </OPTION> <OPTION value="lightblue"> Light Blue - #ADD8E6 </OPTION> <OPTION value="lightcoral"> Light Coral - #F08080 </OPTION> <OPTION value="lightcyan"> Light Cyan - #E0FFFF </OPTION> <OPTION value="lightgoldenrodyellow"> Light Goldenrod Yellow - #FAFAD2 </OPTION> <OPTION value="lightgreen"> Light Green - #D3D3D3 </OPTION> <OPTION value="lightgrey"> Light Grey - #90EE90 </OPTION> <OPTION value="lightpink"> Light Pink - #FFB6C1 </OPTION> <OPTION value="lightsalmon"> Light Salmon - #FFA07A </OPTION> <OPTION value="lightseagreen"> Light Sea Green - #20B2AA </OPTION> <OPTION value="lightskyblue"> Light Sky Blue - #87CEFA </OPTION> <OPTION value="lightslategray"> Light Slate Gray - #8470FF </OPTION> <OPTION value="lightsteelblue"> Light Steel Blue - #778899 </OPTION> <OPTION value="lightyellow"> Light Yellow - #FFFFE0 </OPTION> <OPTION value="lime"> Lime - #00FF00 </OPTION> <OPTION value="limegreen"> Lime-Green - #32CD32 </OPTION> <OPTION value="linen"> Linen - #FAF0E6 </OPTION> <OPTION value="magenta"> Magenta - #FF00FF </OPTION> <OPTION value="maroon"> Maroon - #800000 </OPTION> <OPTION value="mediumaquamarine"> Medium Aquamarine - #66CDAA </OPTION> <OPTION value="mediumblue"> Medium Blue - #0000CD </OPTION> <OPTION value="mediumorchid"> Medium Orchid - #BA55D3 </OPTION> <OPTION value="mediumpurple"> Medium Purple - #9370D8 </OPTION> <OPTION value="mediumseagreen"> Medium Sea Green - #3CB371 </OPTION> <OPTION value="mediumslateblue"> Medium Slate Blue - #7B68EE </OPTION> <OPTION value="mediumspringgreen"> Medium Spring Green - #00FA9A </OPTION> <OPTION value="mediumturquoise"> Medium Turquoise - #48D1CC </OPTION> <OPTION value="mediumvioletred"> Medium Violet-Red #C71585 </OPTION> <OPTION value="midnightblue"> Midnight Blue - #191970 </OPTION> <OPTION value="mintcream"> Mint Cream - #F5FFFA </OPTION> <OPTION value="mistyrose"> Misty Rose - #FFE4E1 </OPTION> <OPTION value="moccasin"> Moccasin - #FFE4B5 </OPTION> <OPTION value="navajowhite"> Navajo White - #FFDEAD</OPTION> <OPTION value="navy"> Navy - #000080 </OPTION> <OPTION value="oldlace"> Old Lace - #FDF5E6 </OPTION> <OPTION value="olive"> Olive - #808000 </OPTION> <OPTION value="olivedrab"> Olive Drab - #6B8E23 </OPTION> <OPTION value="orange"> Orange - #FFA500 </OPTION> <OPTION value="orangered"> Orange Red - #FF4500 </OPTION> <OPTION value="orchid"> Orchid - #DA70D6 </OPTION> <OPTION value="palegoldenrod"> Pale Goldenrod - #EEE8AA </OPTION> <OPTION value="palegreen"> Pale Green - #98FB98 </OPTION> <OPTION value="paleturquoise"> Pale Turquoise - #AFEEEE </OPTION> <OPTION value="palevioletred"> Pale Violet-Red - #D87093 </OPTION> <OPTION value="papayawhip"> Papaya Whip - #FFEFD5 </OPTION> <OPTION value="peachpuff"> Peach Puff - #FFDAB9 </OPTION> <OPTION value="peru"> Peru - #CD853F </OPTION> <OPTION value="pink"> Pink - #FFC0CB </OPTION> <OPTION value="plum"> Plum - #DDA0DD </OPTION> <OPTION value="powderblue"> Powder Blue - #B0E0E6 </OPTION> <OPTION value="purple"> Purple - #800080 </OPTION> <OPTION value="red"> Red - #FF0000 </OPTION> <OPTION value="rosybrown"> Rosy Brown - #BC8F8F </OPTION> <OPTION value="royalblue"> Royal Blue - #4169E1 </OPTION> <OPTION value="saddlebrown"> Saddle Brown - #8B4513 </OPTION> <OPTION value="salmon"> Salmon - #FA8072 </OPTION> <OPTION value="sandybrown"> Sandy Brown - #F4A460 </OPTION> <OPTION value="seagreen"> Sea Green - #2E8B57 </OPTION> <OPTION value="seashell"> Seashell - #FFF5EE </OPTION> <OPTION value="sienna"> Sienna - #A0522D </OPTION> <OPTION value="silver"> Silver - #C0C0C0 </OPTION> <OPTION value="skyblue"> Sky Blue - #87CEEB </OPTION> <OPTION value="slateblue"> Slate Blue - #6A5ACD </OPTION> <OPTION value="slategray"> Slate Gray - #708090 </OPTION> <OPTION value="snow"> Snow - #FFFAFA </OPTION> <OPTION value="springgreen"> Spring Green - #00FF7F </OPTION> <OPTION value="steelblue"> Steel Blue - #4682B4 </OPTION> <OPTION value="tan"> Tan - #D2B48C </OPTION> <OPTION value="teal"> Teal - #008080 </OPTION> <OPTION value="thistle"> Thistle - #D8BFD8 </OPTION> <OPTION value="tomato"> Tomato - #FF6347 </OPTION> <OPTION value="turquoise"> Turquoise - #40E0D0 </OPTION> <OPTION value="violet"> Violet - #EE82EE </OPTION> <OPTION value="wheat"> Wheat - #F5DEB3 </OPTION> <OPTION value="white"> White - #FFFFFF </OPTION> <OPTION value="whitesmoke"> White Smoke - #F5F5F5 </OPTION> <OPTION value="yellow"> Yellow - #FFFF00 </OPTION> <OPTION value="yellowgreen"> Yellow-Green - #9ACD32 </OPTION> </SELECT> </td><td><INPUT font-weight: bold; font-size: 10pt; font-family: verdana;" type="button" size=3 name="color" value=">" onclick="getColor(this.form)"> </td><td><INPUT type="text" size=3 name="red" value="255"> </td><td><INPUT type="text" size=3 name="green" value="255"> </td><td><INPUT type="text" size=3 name="blue" value="255"> </td><td><INPUT font-weight: bold; font-size: 10pt; font-family: verdana;" type="button" size=3 name="convert" value=">" onclick="getHex(this.form)"> <br /><INPUT font-weight: bold; font-size: 10pt; font-family: verdana;" type="button" size=8 name="Convert RGB" value="<" onclick="getRGB(this.form)"> </td><td><INPUT type="text" size=8 name="hexadecimal" value="#ffffff"> </td><td><INPUT font-weight: bold; font-size: 10pt; font-family: verdana;" type="button" size=8 name="Convert to HSL" value=">" onclick="getHSL(this.form)"> <br /> <INPUT font-weight: bold; font-size: 10pt; font-family: verdana;" type="button" size=8 name="Convert to RGB" value="<" onclick="getRGB(this.form)"> </td><td><INPUT type="text" size=3 name="hue" value="255"> </td><td><INPUT type="text" size=3 name="sat" value="255"> </td><td><INPUT type="text" size=3 name="lum" value="255"> </td></tr> </FORM> <tr valign="top"><td> <p> This is similar to <a target="_blank" href="http://www.google.com/ig/directory?hl=en&url=http://imagein.googlepages.com/bGcolor.xml"> bgColor module</a> <a target="_blank" href="http://imagein.googlepages.com/bGcolor.xml"> source</a> for igoogle homepages. </p> </td></tr></table> </p><p> <table bgcolor="#FFFFe0" cellspacing="0" cellpadding="0" width="100%"><tr valign="top"><td> <a name=AboutColors></a><h2> <a href=#AboutColors><img src="http://merc.tv/img/itemthis.gif" alt="Set this at top of window." border="0" width="17" height="17"></a> Color My Eye</h2> <ul><p> The human eye recognizes color using three kinds of <em> photoreceptor cone </em> cells, each sensing a different band of light &#8212; Red, Green, and Blue (abbreviated as "RGB"). These are called the three "basic" colors. </p><p> This is different than "primary" colors, which are red, blue, and yellow. </p><p> <a target="_blank" href="http://www.printerinks.com/"> Printer ink</a> on magazines use a color model called &quot;CMYK&quot; for the Cyan, Magenta, Yellow, and blacK pigments that are blended to <strong>absorb </strong>light reflecting off the media. This is called &quot;subtractive&quot; Image Mode in Photoshop. </p><p> <img src="http://merc.tv/img/reminder.gif" width="20" height="16" alt="Reminder" border="0" /> HTML uses "additive" color values specified by the properties of light <strong>emitted </strong>from LCD monitors or <a target="_blank" href="http://www.phy6.org/stargaze/Sun4spec.htm"> gases</a> <a target="_blank" href="arc/The Many Colors of Sunlight.mht"><img src="http://merc.tv/img/htm.gif" width="11" height="11" border="0"></a> </p><p> <script> function playSound01() { document.all.sound.src = "sounds/zh/colors/white.mp3" } function playSound02() { document.all.sound.src = "sounds/zh/colors/black.mp3" } function playSound03() { document.all.sound.src = "sounds/zh/colors/red.mp3" } function playSound04() { document.all.sound.src = "sounds/zh/colors/green.mp3" } function playSound05() { document.all.sound.src = "sounds/zh/colors/blue.mp3" } function playSound06() { document.all.sound.src = "sounds/zh/colors/yellow.mp3" } </script> <table align="right" cellpadding="4" cellspacing="4" border="2"> <tr> <th><a href="#ColorNamez">Color Name</a></th> <th>r,g,b</th> <th>Hex 6</th> <th>Hex 3</th> <th>Sample</th> </tr><tr valign="top"><td><strong>*Black</strong> (CSS1) <a href="Javascript:void(0);" onMouseOver="playSound02()" title="hei1"> <font size="5">&#40669;</font></a> </td><td>0,0,0</td> <td><tt>#000000</tt></td> <td><tt>#000</tt></td> <td bgcolor="#000000">&nbsp</td> </tr><tr valign="top"><td>Dark Slate Gray</td> <td>49,79,79</td> <td><tt>#2f4f4f</tt></td> <td>-</td> <td bgcolor="2f4f4f">&nbsp</td> </tr><tr valign="top"><td align="right"><em>none</em></td> <td>51,51,51</td> <td><tt>#333333</tt></td> <td>#333</td> <td bgcolor="333333">&nbsp</td> </tr><tr valign="top"><td align="right"><em>none</em></td> <td>102,102,102</td> <td><tt>#666666</tt></td> <td>#666</td> <td bgcolor="666666">&nbsp</td> </tr><tr valign="top"><td>Dim Gray</td> <td>105,105,105</td> <td><tt>#696969</tt></td> <td>-</td> <td bgcolor="696969">&nbsp</td> </tr><tr valign="top"><td>Slate Gray</td> <td>112,138,144</td> <td><tt>#708090</tt></td> <td>-</td> <td bgcolor="708090">&nbsp</td> </tr><tr valign="top"><td>Light Slate Gray</td> <td>119,136,153</td> <td><tt>#778899</tt></td> <td>-</td> <td bgcolor="778899">&nbsp</td> </tr><tr valign="top"><td>"Normal" <strong>*Gray</strong> (CSS1) </td> <td><strong>128,128,128</strong></td> <td><strong><tt>#808080</tt></strong></td> <td>-</td> <td bgcolor="808080">&nbsp</td> </tr><tr valign="top"><td align="right"><em>none</em></td> <td>153,153,153</td> <td><tt>#999999</tt></td> <td>#999</td> <td bgcolor="999999">&nbsp</td> </tr><tr valign="top"><td>*Silver (CSS1) </td> <td>192,192,192</td> <td><tt>#C0C0C0</tt></td> <td>-</td> <td bgcolor="C0C0C0">&nbsp</td> </tr><tr valign="top"><td>Light Gray</td> <td>211,211,211</td> <td><tt>#d3d3d3</tt></td> <td>-</td> <td bgcolor="d3d3d3">&nbsp</td> </tr><tr valign="top"><td>Gainsboro</td> <td>220,220,220</td> <td><tt>#dcdcdc</tt></td> <td>-</td> <td bgcolor="dcdcdc">&nbsp</td> </tr><tr valign="top"><td><strong>*White</strong> (CSS1) <a href="Javascript:void(0);" onMouseOver="playSound01()" title="bai2"> <font size="3"></font></a> </td><td>256,256,256</td> <td><tt>#FFFFFF</tt></td> <td>#FFF</td> <td bgcolor="FFFFFF">&nbsp</td> </tr></table> <a name="Grayz"></a><h3> <a href=#Grayz><img src="http://merc.tv/img/itemthis.gif" alt="Set this at top of window." border="0" width="17" height="17"></a> RGB Grayness</h2> <strong>Black</strong> is the <strong>absence </strong> of light shining, so it's specified with <strong>zeros</strong>. </p><p> <a target="_blank" href="http://www.recycle4charity.org">White</a> () light contains the maximum value of all three colors. </p><p> &quot;Normal&quot; <a target="_blank" href="http://www.tayloredmktg.com/rgb/#GR"> gray</a> (<a target="_blank" href="http://www.cozychinese.com/category/audio/colors/"></a>) has <strong>equal amounts </strong>of all three primary colors at 50%, represented as decimal 128 or hex 80. </p><p> Each 8-bit hex digit can have one of 16 values (from 0 through 9,A,B,C,D,E,F). So divide a decimal number by 16 for the first hex digit. Divide the remainder by 16 for the second hex digit. <br /> Alternately, multiply the first hex digit by 255 to convert it to decimal. </p><p> RGB coloring is specified in <a href="1css.htm">Cascading Style Sheet coding</a> one of several ways: </p><p><ul><tt> color: rgb(255,255,255); // 3 decimals<br /> color: #FFFFFF; // hex triplet <br /> color: #FFF; // hex shortcut </tt></ul> </p><p> 3-digit hex shortcuts are automatically converted by browsers doubling each digit such that #678 = #667788. Although more compact, they cannot be used to identify colors with non-repeating <a target="_blank" href="http://spiff.rit.edu/classes/phys213/lectures/inkjet/inkjet_long.html"> color</a> values such as #ACD257. </p><p> Since the maximum value of each hex "FF" is equivalant to decimal value 256, the RGB color space has 256*256*256 or 16,777,216 possible colors, while most humans can distinguish a gamut of about 10 million different colors. </p> </ul> </td><td width="40" align="center"><br /> <a href="#TopMenu"><img alt="Go to top of page" border =0 src="http://merc.tv/img/topmenu.gif" width="22" height="22"></a> <br /> <a href="#ColorTool"><img border="0" src="http://merc.tv/img/wcuptri.gif" width="32" height="22"></a> <br /> <a href="#ColorNamez"><img border="0" src="http://merc.tv/img/wcdntri.gif" width="40" height="23"></a> </td></tr></table> <table bgcolor="#FFFFe0" width="100%" border="0" cellspacing="0" cellpadding="0"><tr valign="top"><td> <a name=ColorNamez></a><h2> <a href=#ColorNamez><img src="http://merc.tv/img/itemthis.gif" alt="Set this at top of window." border="0" width="17" height="17"></a> Color Names</h2> <ul><p> <table align="right" cellpadding="4" cellspacing="2" border="1"><th> % </th><th> Decimal </th><th> Hex </th><th><a href="Javascript:void(0);" onMouseOver="playSound03();" title="hong2"> <font size="4"></font></a> </th><th><a href="Javascript:void(0);" onMouseOver="playSound04();" title="luu4"> <font size="4"></font></a> </th><th><a href="Javascript:void(0);" onMouseOver="playSound05();" title="Shi4 lan2 de"> <font size="4"></font></a> </th></tr> <tr align="center"><td> 100% </td><td> 255 </td><td> xFF </td><td bgcolor="#FF0000"><font color="#000000"><strong>*Red<br />#FF0000</strong></font> </td><td bgcolor="#00FF00"><font color="#000000"><strong>*Lime<br />#00FF00</strong></font> </td><td bgcolor="#0000FF"><font color="#FFFFFF"><strong>*Blue<br />#0000FF</strong></font></td></tr> <tr align="center"><td> &nbsp;75% </td><td> 192 </td><td> xC0 </td><td bgcolor="#C00000"><font color="#FFFFFF"><strong>#C00000</strong></font> </td><td bgcolor="#00C000"><font color="#FFFFFF"><strong>#00C000</strong></font> </td><td bgcolor="#0000C0"><font color="#FFFFFF"><strong>#0000C0</strong></font></td></tr> <tr align="center"><td> &nbsp;69% </td><td> 176 </td><td> xB0 </td><td bgcolor="#B00000"><font color="#FFFFFF"><strong>#B00000</strong></font> </td><td bgcolor="#00B000"><font color="#FFFFFF"><strong>#00B000</strong></font> </td><td bgcolor="#0000B0"><font color="#FFFFFF"><strong>#0000B0</strong></font></td></tr> <tr align="center"><td> &nbsp;60% </td><td> 153 </td><td> x99 </td><td bgcolor="#990000"><font color="#FFFFFF"><strong>#990000</strong></font> </td><td bgcolor="#009900"><font color="#FFFFFF"><strong>#009900</strong></font> </td><td bgcolor="#000099"><font color="#FFFFFF"><strong>#000099</strong></font></td></tr> <tr align="center"><td> &nbsp;50% </td><td> 128 </td><td> x80 </td><td bgcolor="#800000"><font color="#FFFFFF"><strong>*Maroon<br />#800000</strong></font> </td><td bgcolor="#008000"><font color="#FFFFFF"><strong>*Green<br />#008000</strong></font> </td><td bgcolor="#000080"><font color="#FFFFFF"><strong>*Navy<br />#000080</strong></font></td></tr> <tr align="center"><td> &nbsp;25% </td><td> &nbsp;64 </td><td> x40 </td><td bgcolor="#400000"><font color="#FFFFFF"><strong>#400000</strong></font> </td><td bgcolor="#004000"><font color="#FFFFFF"><strong>#004000</strong></font> </td><td bgcolor="#000040"><font color="#FFFFFF"><strong>#000040</strong></font></td></tr> <tr align="center"><td> &nbsp;20% </td><td> &nbsp;51 </td><td> x33 </td><td bgcolor="#330000"><font color="#FFFFFF"><strong>#330000</strong></font> </td><td bgcolor="#003300"><font color="#FFFFFF"><strong>#003300</strong></font> </td><td bgcolor="#000033"><font color="#FFFFFF"><strong>#000033</strong></font></td></tr> </table> </p><p> However, the W3C CSS1 standard has assigned only 16 names: </p><p> <ul> <li> black, gray, silver, white <li> Less Saturated primary colors red, lime, blue <li> More saturated primary colors maroon, green, navy <li> Less saturated <a href="#Complementarz"> complementary colors</a> aqua, fuchsia, and yellow. <li> More saturated complementary colors</a> olive, purple, teal. </p><p> <img src="http://merc.tv/img/reminder.gif" width="20" height="16" alt="Reminder" border="0" /> The CSS1 color name "green" is not as saturated as the CSS1 color name "lime". "Orange" was added in CSS2.1. </ul> </p><p> <img src="http://merc.tv/img/caution.gif" width="15" height="14" alt="Caution!" border="0" /> Do not use these 147 <a target="_blank" href="http://tagsnstyles.host.sk/iecolor.html"> proprietary</a> <a target="_blank" href="http://en.wikipedia.org/wiki/Web_colors"> color names</a> introduced with <a target="_blank" href="http://en.wikipedia.org/wiki/X11_color_names"> X11</a>, then adopted by only Internet Explorer/Opera, then lately by SVG and <a target="_blank" href="http://www.w3.org/TR/2001/WD-css3-color-20010305#x11-color"> CSS3</a>. </p><p> <img src="http://merc.tv/img/dothis.gif" width="40" height="22" alt="Do this!" border="0" /> Select a color number and curson down/up to set different background colors. Click a gray button to <a target="_blank" href="http://www.easyrgb.com/math.php?MATH=M19">convert</a>. </p><p> </p> <table width="100%" border="0" cellspacing="0" cellpadding="0"><tr valign="top"><td> <a name=HexPickz></a><h2> <a href=#HexPickz><img src="http://merc.tv/img/itemthis.gif" alt="Set this at top of window." border="0" width="17" height="17"></a> "Browser Safe" Hex Colors</h2> <p> <table border="0" cellspacing="0" cellpadding="0"> <tr valign="top"><td> </td><td align="left"><center><strong><p>&GT; From <font COLOR=Green>GREEN</font> to <font COLOR=Blue>BLUE &GT;</font></strong></center> </td></tr> <tr valign="top"> <td align="left" width="20"><span><font size=+1> <p><br /> <p><br /> <p><br /> <p><br /> F<br /> r<br /> o<br /> m<br /> <p><br /> <p><font COLOR=Green><strong>G <br />R <br />E <br />E <br />N</strong></font><strong> <p><br /> <p><br /> <p>t <br />o <p><br /> <p><br /><font COLOR=Red> <p>R <br />E <br />D</font></P></strong></font></span> </td><td><p> <script language="JavaScript"> <!-- Adapted From http://javascript.internet.com/page-details/color-chart.html --> <!-- by Dion (yobo42@hotmail.com) of http://members.xoom.com/yoboseyo --> // var a = 8; clr=new Array('00','20','40','60','80','A0','C0','FF'); var a = 6; clr=new Array('00','33','66','99','CC','FF'); document.write("<table border=0 cellspacing=10 cellpadding=4>"); for (i=0;i<a;i++) { document.write("<tr align=center><td><font size=+1><strong>"+clr[i]+"</strong></font></td>"); for (j=0;j<a;j++) { document.write("<td><font size=-2>"+clr[j]+"</font></td>"); } document.write("</tr>"); for (j=0;j<a;j++) { document.write("<tr align=center valign=center><td><font size=-1>"+clr[j]+"</font></td>"); for (k=0;k<a;k++) { document.write('<td bgcolor="#'+clr[i]+clr[j]+clr[k]+'">'); document.write('<a target="colour" href="http://www.netspade.com/tools/colours?colour='); document.write(clr[i]+clr[j]+clr[k]+'"'); // document.write(' onMouseover="Javascript:document.bgcolor="#'+clr[i]+clr[j]+clr[k]+'"'); document.write('><tt><font size=1 color="#'+clr[a-1-i]+clr[a-1-j]+clr[a-1-k]+'"> '); document.write('&nbsp;'+clr[i]+clr[j]+clr[k]+'&nbsp;'); document.write('</font></tt></a></td>'); } document.write('</tr>'); // document.write('<tr><td colspan=4></td>'); // document.write("'<td bgcolor="000000"><p><strong><a href="Javascript:void(0)'"); // document.write("' onMouseover="document.bgcolor='#FFFFFF'">'"); // document.write("' <font size=1 COLOR="#FFFFFF">FFFFFF</font></a></strong></td>'"); // document.write("'<td bgcolor="FFFFFF"><p><strong><a href="Javascript:void(0)"'"); // document.write("' onMouseover="document.bgcolor='#000000'">'"); // document.write("' <font size=1 COLOR="#000000">000000</font></a></strong>'"); // document.write("</td></tr>"); } } document.write("</table>"); // end --> </script> <center><strong>&GT; From <font COLOR=Red>RED</font> to <font COLOR=Blue>BLUE &GT;</font></strong></center> </td></tr></table> <p> </td><td width="15"> </td><td><br /><br /> <img src="http://merc.tv/img/rose.gif"> Generated by Javascript (instead of static HTML as in <a target="_blank" href="http://www.bmk.com.au/cgi-bin/colors.php"> this page</a> of 4096 <a target="_blank" href="http://www.december.com/html/spec/color3hex1.html">these Hex 3</a> colors). </p><p> This 6x6x6 table of color codes on the left displays the 216 "browser safe" color pallette for use on older (v4) internet browsers running on older computers which were only able to support 256 different colors. </p><p> This palette was first published by <nobr><img alt="webpage article" src="http://merc.tv/img/htm.gif" width="13" height="15" /><a target="_blank" href="http://www.lynda.com/hex.html"> Lynda</nobr> Weinman</a>, who notes that, since 2004, most monitors and browsers can handle more complex colors without "dithering". </p><p> However, browsers on <a href="wireless.htm">wireless</a> devices (PDAs and cell phones) are again starting at version 4! </p><p> <img src="http://merc.tv/img/dothis.gif" width="40" height="22" alt="Do this!" border="0" /> Click on the color number to obtain a list of <a href="#Complementarz">complementary colors</a> from the amazing <a target="_blank" href="http://www.netspade.com/tools/colours"> Netspade site by Jason Davies</a>. </p><p> Kelly Martin's <a target="_blank" href="http://static.pyrzqxgl.org/~kmartin/colorexplorer-p.html"> Colorspace Explorer (Lab colorspace, version 3.04)</a> and <a target="_blank" href="http://static.pyrzqxgl.org/~kmartin/ce2.cgi"> Cooperative Color Naming System</a>. </p><p> <img src="http://merc.tv/img/idea.gif" width="16" height="16" alt="Idea" border="0" /> A good rule of thumb is to take your background colour and compute Y = 0.3R + 0.59G + 0.11B. If Y exceeds 0.5, use black foreground text, otherwise use white." </p><p> <img src="http://merc.tv/img/tool.gif" width="16" height="16" alt="tool" /> <a target="_blank" href="http://www.artofwebdesign.net/colour/colourcalculator.php"> Color Scheme Calculator</a> calculates triad, complementary, analogous, and split complementary colours, plus saturation and lightness variations. Also converts the given colour to RGB and HSL. </p><p> <img src="http://merc.tv/img/idea.gif" width="16" height="16" alt="Idea" border="0" /> The advantage of using HSL is that when you keep the brightness and saturation level constant, you will select colors that go well with each other. <img src="http://merc.tv/img/tool.gif" width="16" height="16" alt="tool" /> <a target="_blank" href="http://www.bobpowell.net/RGBHSB.htm"> Bob Power's example</a>. </p><p> <img src="http://merc.tv/img/tool.gif" width="16" height="16" alt="tool" /> <a target="_blank" href="http://www.eltima.com/products/reviews/free-color-picker/"> Freeware Eltima Absolute client program</a> doesn't display HSL in percentage, but it's nonetheless a useful color scheme generator, color history builder, color scheme management system, and screen color grabber. </p><p> Formulas to convert between color space schemes are defined in the book Fundamentals of Interactive Computer Graphics by Foley and van Dam (c 1982, Addison-Wesley). </p><p> <img src="http://merc.tv/img/tool.gif" width="16" height="16" alt="tool" /> <a target="_blank" href="http://meyerweb.com/eric/tools/color-blend/"> Eric Meyer's Color Blend online tool</a> </p><p> <img src="http://merc.tv/img/tool.gif" width="16" height="16" alt="tool" /> <a target="_blank" href="http://www.2createawebsite.com/build/hex-colors.html"> Many ways to select colors by Lisa Irby</a> </p> </ul> </td><td width="15">&nbsp; </td><td width="40" align="center" bgcolor="#FFFFe0"> <a href="#TopMenu"><img alt="Go to top of page" border =0 src="http://merc.tv/img/topmenu.gif" width="22" height="22"></a> <br /> <a href="#ColorNamez"><img border="0" src="http://merc.tv/img/wcuptri.gif" width="32" height="22"></a> <br /> <a href="#Complementarz"><img border="0" src="http://merc.tv/img/wcdntri.gif" width="40" height="23"></a> </td></tr></table> </ul> <table bgcolor="#FFFFe0" cellspacing="0" cellpadding="0" width="100%"><tr valign="top"><td> <a name=Complementarz></a><h2> <a href=#Complementarz><img src="http://merc.tv/img/itemthis.gif" alt="Set this at top of window." border="0" width="17" height="17"></a> Complementary Colors</h2> <ul><p> <img align="right" src="http://merc.tv/img/fig/colmix.gif" alt="color mix" width="188" height="182"> By definition, complementary colors have <strong> equal amounts of two colors</strong>: </p><p><ul> <table cellpadding="4" cellspacing="2" border="1"> <tr valign="top"><th> Red </th><th> Green </th><th> Blue </th><th> Bounces </th><th> <a target="_blank" href="http://www.w3schools.com/html/html_colornames.asp">Color Name</a> </th><th> Absorbs </th></tr> <tr valign="top"><td> 00 </td><td> <strong>FF</strong> </td><td> <strong>FF</strong> </td><td> green and blue </td><td bgcolor="#00FFFF"> Cyan/*Aqua </td><td> red </td></tr> <tr valign="top"><td> <strong>FF</strong> </td><td> 00 </td><td> <strong>FF</strong> </td><td> red and blue </td><td bgcolor="#FF00FF"> Magenta/*Fuchia </td><td> green </td></tr> <tr valign="top"><td> <strong>FF</strong> </td><td> <strong>FF</strong> </td><td> 00 </td><td> red and green </td><td bgcolor="#FFFF00"> *Yellow <a href="Javascript:void(0);" onMouseOver="playSound06()" title="huang2"> <font size="3">&#40644;</font></td><td> blue </td></tr> </table> </ul> </p><p> Cyan, magenta, and yellow &#8212; abbreviated as "CMY" &#8212; are also called "secondary" colors. </p><p> Less saturated complementary colors: </p><p><ul> <table cellpadding="4" cellspacing="2" border="1"> <tr valign="top"><th> Red </th><th> Green </th><th> Blue </th><th> Bounces </th><th> <a target="_blank" href="http://www.w3schools.com/html/html_colornames.asp">Color Name</a> </th><th> Absorbs </th></tr> <tr valign="top"><td> 00 </td><td> <strong>80</strong> </td><td> <strong>80</strong> </td><td> green and blue </td><td bgcolor="#008080"> <font color="white">*Teal </font></td><td> red </td></tr> <tr valign="top"><td> <strong>80</strong> </td><td> 00 </td><td> <strong>80</strong> </td><td> red and blue </td><td bgcolor="#800080"> <font color="white">*Purple</font> <a target="_blank" href="http://www.cozychinese.com/category/audio/colors/"><font color="white"size="4">&#32043;</font></a></td><td> green </td></tr> <tr valign="top"><td> <strong>80</strong> </td><td> <strong>80</strong> </td><td> 00 </td><td> red and green </td><td bgcolor="#808000"> <font color="white">*Olive </font></td><td> blue </td></tr> </table> </ul> </p><p> <img src="http://merc.tv/img/reminder.gif" width="20" height="16" alt="Reminder" border="0" /> To obtain the complement to a specific color, merely calculating the remainder from 255 or FF doesn't work for all colors. It's more reliable to first convert the number to the number of <a href="#HSLz">HSL Hue degrees</a>, then add or subtract 180 degrees. </p></ul> <td width="40" align="center"> <a href="#TopMenu"><img alt="Go to top of page" border =0 src="http://merc.tv/img/topmenu.gif" width="22" height="22"></a> <br /> <a href="#Topic1"><img border="0" src="http://merc.tv/img/wcuptri.gif" width="32" height="22"></a> <br /> <a href="#ColorRange"><img border="0" src="http://merc.tv/img/wcdntri.gif" width="40" height="23"></a> </td></tr></table> <table bgcolor="#FFFFe0" cellspacing="0" cellpadding="0" width="100%"><tr valign="top"><td> <ul><p> <a name=ColorRange></a><h3> <a href=#ColorRange><img src="http://merc.tv/img/itemthis.gif" alt="Set this at top of window." border="0" width="17" height="17"></a> Color Range</h3> These 24 colors are "evenly spaced" &#8212; using FF/00, 80/80 (50%/50%), 40/C0 (75%/25%) &#8212; and arranged in two rows that are <strong> opposite</strong> each other. For example, red on the first line is opposite cyan on the second line. </p><p> <table cellpadding="2" cellspacing="2" border="1"><tr valign="bottom"> <td bgcolor="#ff0000" align="center"> <a style="color: white; text-decoration: none" href="javascript:fillTables('ff0000')"> *red</a> <br />FF0000<br />Hue 0</td> <td bgcolor="#ff4000" align="center"> <a style="color: white; text-decoration: none" href="javascript:fillTables('ff4000')"> coral</a> <br />FF4000<br />Hue 15</td> <td bgcolor="#ff8000" align="center"> <a style="color: black; text-decoration: none" href="javascript:fillTables('ff8000')"> orange</a> <br />FF8000<br />Hue 30</td> <td bgcolor="#ffc000" align="center"> <a style="color: black; text-decoration: none" href="javascript:fillTables('ffc000')"> tangerine</a> <br />FFC000 <br />Hue 45</td> <td bgcolor="#ffff00" align="center"> <a style="color: black; text-decoration: none" href="javascript:fillTables('ffff00')"> *yellow</a> <br />FFFF00 <br />Hue 60</td> <td bgcolor="#c0ff00" align="center"> <a style="color: black; text-decoration: none" href="javascript:fillTables('c0ff00')"> peridot</a> <br />C0FF00<br />Hue 75</td> <td bgcolor="#80ff00" align="center"> <a style="color: black; text-decoration: none" href="javascript:fillTables('80ff00')"> 80FF00<br />Hue 90</td> <td bgcolor="#40ff00" align="center"> <a style="color: black; text-decoration: none" href="javascript:fillTables('40ff00')"> 40FF00<br />Hue 105</td> <td bgcolor="#00ff00" align="center"> <a style="color: black; text-decoration: none" href="javascript:fillTables('00ff00')"> *lime<br />00FF00<br />Hue 120</a></td> <td bgcolor="#00ff40" align="center"> <a style="color: black; text-decoration: none" href="javascript:fillTables('00ff40')"> 00FF40<br />Hue 135</a></td> <td bgcolor="#00ff80" align="center"> <a style="color: black; text-decoration: none" href="javascript:fillTables('00ff80')"> 00FF80<br />Hue 150</a></td> <td bgcolor="#00ffc0" align="center"> <a style="color: black; text-decoration: none" href="javascript:fillTables('00ffc0')"> mint<br />00FFC0<br />Hue 165</a></td> <tr valign="bottom"> <td bgcolor="#00ffff" align="center"> <a style="color: black; text-decoration: none" href="javascript:fillTables('00ffff')"> *aqua/<br />cyan<br />00FFFF<br />Hue 180</a></td> <td bgcolor="#00c0ff" align="center"> <a style="color: black; text-decoration: none" href="javascript:fillTables('00c0ff')"> sky<br />00C0FF<br />Hue 195</a></td> <td bgcolor="#0080ff" align="center"> <a style="color: white; text-decoration: none" href="javascript:fillTables('0080ff')"> azure<br />0080FF<br />Hue 210</a></td> <td bgcolor="#0040ff" align="center"> <a style="color: white; text-decoration: none" href="javascript:fillTables('0040ff')"> &nbsp;<br />0040FF<br />Hue 225</a></td> <td bgcolor="#0000ff" align="center"> <a style="color: white; text-decoration: none" href="javascript:fillTables('0000ff')"> *blue<br />0000FF<br />Hue 240</a></td> <td bgcolor="#4000ff" align="center"> <a style="color: white; text-decoration: none" href="javascript:fillTables('4000ff')"> royal<br />4000FF<br />Hue 255</a></td> <td bgcolor="#8000ff" align="center"> <a style="color: white; text-decoration: none" href="javascript:fillTables('8000ff')"> violet<br />8000FF<br />Hue 270</a></td> <td bgcolor="#c000ff" align="center"> <a style="color: white; text-decoration: none" href="javascript:fillTables('c000ff')"> plum <br />C000FF<br />Hue 285</a></td> <td bgcolor="#ff00ff" align="center"> <a style="color: white; text-decoration: none" href="javascript:fillTables('ff00ff')"> *fuchia/<br />Magenta<br />FF00FF <br />Hue 300</a></td> <td bgcolor="#ff00c0" align="center"> <a style="color: white; text-decoration: none" href="javascript:fillTables('ff00c0')"> berry<br />FF00C0<br />Hue 315</a></td> <td bgcolor="#ff0080" align="center"> <a style="color: white; text-decoration: none" href="javascript:fillTables('ff0080')"> pink<br />FF0080<br />Hue 330</a></td> <td bgcolor="#ff0040" align="center"> <a style="color: white; text-decoration: none" href="javascript:fillTables('ff0040')"> cherry<br />FF0040<br />Hue 345</a></td> </table> </p><p> <!-- <img align="right" src="http://merc.tv/img/colorcube.gif" width="157" height="169" alt="cool animated gif" border="0"> Since there are three primary colors, ideally we would use a <strong>cube</strong> to select the mix of colors. </p><p> But most software manufacturers have opted to use two-dimensional representations of the color space, as a circular <a href="#ColorWheelz">wheel</a> or as this horizontal rainbow from Microsoft Visual Studio <a target="_blank" href="http://www.geekpedia.com/tutorial185_Getting-the-hex-value-of-a-color-using-ColorPicker.html"> applications</a>. </p><p> --> </p></ul> </td><td width="40" align="center" bgcolor="#FFFFe0"> <a href="#TopMenu"><img alt="Go to top of page" border =0 src="http://merc.tv/img/topmenu.gif" width="22" height="22"></a> <br /> <a href="#AboutColors"><img border="0" src="http://merc.tv/img/wcuptri.gif" width="32" height="22"></a> <br /> <a href="#ColorPickerz"><img border="0" src="http://merc.tv/img/wcdntri.gif" width="40" height="23"></a> </td></tr></table> <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#FFFFe0"><tr valign="top"><td with="17"> <a name="ColorPickerz"></a> <ul><p> The left-to-right arrangement of these 24 colors reflect the sequence of optical light <a target="_blank" href="http://imagine.gsfc.nasa.gov/docs/science/know_l1/emspectrum.html"> wavelengths along the electro-magnetic spectrum range</a> from red (longer 780 nanometers) to violet (shorter 380 nm). </p><p> The Microsoft Windows system (and MSPaint) converts RGB to HSL incorrectly. </ul> </p><p> <a name="HSLz"></a><h2> <a href="#HSLz"><img border="0" src="http://merc.tv/img/itemthis.gif" width="17" height="17"></a> HSL Color Pickers</h2> <ul><p> The vertical slider at the right specifies the <strong>"luminosity" </strong>value used in the "HSL" color system, where HSL stands for Hue, Saturation, and Lightness/Luminosity, </p><p> Some use the word "Brightness" instead of "Luminosity" for "HSB", a color system defined in 1978 by A. R. Smith. This system is used by Apple computers and the GIMP graphics program. </p><p> If you like sliders, <a target="_blank" href="http://www.html-color-codes.info/"> HTML Color Picker at html-color-codes.info</a> shows RBG and HSV values for each point on the slider. </p><p> A function in the new CSS3 standard implemented so far only by newer Gecko-based browsers (Mozilla, Firebird/Firefox, K-Meleon) use HSL/HSB: </p><p><ul><pre> color: hsl( 84, 60, 44 ); </pre></ul> </p><p> </p></ul> </td><td width="15">&nbsp; </td><td> <img src="http://merc.tv/img/scr/MSVSHexColorPicker.bmp" width="453" height="323"> </td><td width="40" align="center" bgcolor="#FFFFe0"> <a href="#TopMenu"><img alt="Go to top of page" border =0 src="http://merc.tv/img/topmenu.gif" width="22" height="22"></a> <br /> <a href="#AboutColors"><img border="0" src="http://merc.tv/img/wcuptri.gif" width="32" height="22"></a> <br /> <a href="#HSLz"><img border="0" src="http://merc.tv/img/wcdntri.gif" width="40" height="23"></a> </td></tr></table> <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#FFFFe0"><tr valign="top"><td width="40"> &nbsp;</td><td> <img src="http://merc.tv/img/fig/HSLColorCone3.bmp" width="300" height="319" border="0"> </td><td width="15">&nbsp; </td><td> "84" in the first parameter above is for <strong> "Hue"</strong>, expressed as the number of <strong>degrees of a circle</strong>, a <a target="_blank" href="http://en.wikipedia.org/wiki/HSL_color_space"> non-linear</a> deformation of the RGB color space: </p><p> <ul> red at the 0°/360 position; <br /> green at 120° <br /> blue at 240° <br /> </p><p> Arranging the range of colors in a circle makes <a href="#ColorRange"> opposite colors</a> intuitively easy to identify. </ul> </p><p> "60" in the second parameter is the <strong> saturation </strong> percent, a measure of color "purity" &#8212; from 100% brightness down through pastels to 0% for gray. This is selected by the vertical position of the mouse in the GUI. </p><p> "44" in the third parameter is the <strong> Luminosity / Lightness</strong> percent (100% is white, 0% is black, 50% is for "normal"/"pure" color). </p><p> HSL is &quot;symmetrical&quot; to lightness and darkness, Unlike the HSV system. </p><p> Macromedia Studio, Paint Shop Pro, Inkscape (starting from version 0.42) are all supporting HSL, as are photospectrometers which measure colors. </ul> </p> </td><td width="40" align="center" bgcolor="#FFFFe0"> <a href="#TopMenu"><img alt="Go to top of page" border =0 src="http://merc.tv/img/topmenu.gif" width="22" height="22"></a> <br /> <a href="#HSLz"><img border="0" src="http://merc.tv/img/wcuptri.gif" width="32" height="22"></a> <br /> <a href="#MSPickerz"><img border="0" src="http://merc.tv/img/wcdntri.gif" width="40" height="23"></a> </td></tr></table> <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#FFFFe0"><tr valign="top"><td> <a name="MSPickerz"></a><h3> <a href="#MSPickerz"><img border="0" src="http://merc.tv/img/itemthis.gif" width="17" height="17"></a> Microsoft Color Pickers</h3> <ul><p> The hexagon in Microsoft's "Standard" Color Picker seen in Visio 2002, Word 2003, etc. are not intuitive. </p><p> Unlike other color picker interfaces, pure colors are not in a corner: </p><p> <ul> <li> red is the 2nd row up from the bottom onhex in from the right. <li> blue is the from the left/right outer ring or 2nd from the top/bottom hex. <li> green I don't know </ul> </p><p> All colors use a combination of "browser safe" values 255 (xFF) - 204 (xCC) - 153 (x99) - 102 (x66) - 51 (x33) - 0. </p><p> Even <em>less</em> intuitive are the color numbers used by VBScript recorded of actions in Excel 2003 to Format Data Series: </p><p> <a target="_blank" href="http://merc.tv/img/fig/excel_2003_color_nums.png"> <img src="http://merc.tv/img/fig/excel_2003_color_nums.png" alt="Microsoft Excel 2003 Color Numbers" border="0" /></a> </p></ul> </td><td width="15">&nbsp; </td><td><br /> <img src="http://merc.tv/img/scr/ms2003.more.standard.bmp" width="332" height="355"> <!-- visio2002.colorwheel.jpg" --> </p><p> </p><p> </p></ul> </td><td width="40" align="center" bgcolor="#FFFFe0"> <a href="#TopMenu"><img alt="Go to top of page" border =0 src="http://merc.tv/img/topmenu.gif" width="22" height="22"></a> <br /> <a href="#ColorPickerz"><img border="0" src="http://merc.tv/img/wcuptri.gif" width="32" height="22"></a> <br /> <a href="#ColorWheelz"><img border="0" src="http://merc.tv/img/wcdntri.gif" width="40" height="23"></a> </td></tr></table> <table bgcolor="#FFFFe0" cellspacing="0" cellpadding="0" width="100%"><tr valign="top"><td> <a name=ColorWheelz></a><h2> <a href=#ColorWheelz><img src="http://merc.tv/img/itemthis.gif" alt="Set this at top of window." border="0" width="17" height="17"></a> Color Wheels</h2> <ul><p> The honeycomb color wheel of 216 colors from <a target="_blank" href="http://www.visibone.com/colorlab/"> Visibone</a>, is available as a poster. </p><p> <a target="_blank" href="http://www.visibone.com/colorlab/"> <img src="http://merc.tv/img/fig/colorpostr.jpg" width=212 height=282 border="0"></a> </p><p> <a target="_blank" href="http://www.allscoop.com/tools/Web-Colors/web-colors.php"> <img align="right" src="http://merc.tv/img/fig/allscoopcolorwheel.png"> This color picker from Allscoop</a> suggests web-safe, web-smart, and unsafe RGB color numbers as you mouse over. </p><p> The color wheel of six conical regions by the <a target="_blank" href="http://www.ascensionware.com/resources/color/"> (now-obsolete Ascensionware)</a> by Daniel Prust allows you to click and hold down the left mouse button to gradually add color: </p><p> <img src="http://merc.tv/img/scr/colorwheel.jpg" width="303" height="303" border="0"> </p><p> </p></ul> </td><td width="15">&nbsp; </td><td width="235" bgcolor="#CFEFCF"><br /> <ul> <img src="http://merc.tv/img/tool.gif" width="16" height="16" alt="tool" /> Among the many tools to help you pick colors: <p> <li><a target="_blank" href="http://home.earthlink.net/~jakesan/"> Doug</a>'s <a target="_blank" href="http://www.hypersolutions.org/pages/colorSel.html"> Color Picker</a> shows you how a page looks with background, foreground, and other colors you select from his menu of colors. <li><a target="_blank" href="http://sivamdesign.com/scripts/dwld/sampler.html"> Sandeep Gangadharan uses this palette:<br /><img src="http://merc.tv/img/palette.gif" border="0"></a> <li><a target="_blank" href="http://r0k.us/graphics/SIHwheel.html">Rich Franzen's Color Wheel</a> uses a Java applet to select Saturation, Intensity, and Hue</a> <!-- <li><a href="javascript:t='';c=new%20Array('00','33','66','99','CC','FF');for(i=0;i<6;i++){t+='<table%20width="100%">';for(j=0;j<6;j++){t+='<tr%20valign="top">';for(k=0;k<6;k++){L=c[i]+c[j]+c[k];t+='<td%20bgcolor='+L+'>'+L}t+='</tr>'}t+='</table>'};with(document){write(t);void(close())}"> Generated with Javascript code</a> [Courtesy of <a href="http://www.bookmarklets.com">Bookmarklets.com</a>] --> <li><a target="_blank" href="http://www.webattack.com/Freeware/webpublish/fwcolor.shtml"> Color Pickers</a> <li><a target="_blank" href=http://members.tripod.com/p_cole/public/color.html> Pete's Color pages</a> <li><a target="_blank" href="http://www.colormatters.com/khouw.html"> wColorMatters.com</a> <li><a target="_blank" href="http://www.geocities.com/tentaclesa/colors.html"> Tentacles</a> shows the number on a grid.<p> <li><a target="_blank" href="http://www.1728.com/colrchr3.htm"> 1728</a> uses mouse rollover effects. </p><p> <img align="left" src="http://merc.tv/img/book.gif"> <a target="_blank" href="http://www.amazon.com/exec/obidos/ASIN/0471287083/wilsonslifenotes/"> <img align="right" src="http://merc.tv/img/books/0471287083.jpg" width="80" border="0"> Principles of Color Design (Wiley; September 26, 1996)</a> by Wucius Wong is the classic introduction to making effective use of color. </p><p> <img align="left" src="http://merc.tv/img/book.gif"> <a target="_blank" href="http://www.amazon.com/exec/obidos/ASIN/0300018460/wilsonslifenotes/"> <img align="right" src="http://merc.tv/img/books/0300018460.jpg" width="80" border="0"> Interaction of Color, Revised Edition (Yale University Press, 1975)</a> by Josef Albers </ul> by Marianne: <ul> <li><a target="_blank" href="http://www.childoflight.org/mcc/colorcodeAA.html"> Pastel tones - pink to yellow</a> <li><a target="_blank" href="http://www.childoflight.org/mcc/colorcodeB.html"> Pastel tones - lavender, moss green, rust</a> <li><a target="_blank" href="http://www.childoflight.org/mcc/colorcodeC.html"> Darker pastel tones - blue, green, gold</a> <li><a target="_blank" href="http://www.childoflight.org/mcc/colorcodeE.html"> Grey, brown, orange, and flesh tones</a> <li><a target="_blank" href="http://www.childoflight.org/mcc/colorcodeD.html"> Gem tones - lapis lazuli, amethyst, garnet</a> <li><a target="_blank" href="http://www.childoflight.org/mcc/colorcodeG.html"> Gem tones - aquamarine, emerald, jade</a> </ul> </p> </ul> </td><td width="15">&nbsp; </td><td width="40" align="center" bgcolor="#FFFFe0"> <a href="#TopMenu"><img alt="Go to top of page" border =0 src="http://merc.tv/img/topmenu.gif" width="22" height="22"></a> <br /> <a href="#MSPickerz"><img border="0" src="http://merc.tv/img/wcuptri.gif" width="32" height="22"></a> <br /> <a href="#ColorWheel2"><img border="0" src="http://merc.tv/img/wcdntri.gif" width="40" height="23"></a> </td></tr></table> <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#FFFFe0"><tr valign="top"><td> <a name="ColorWheel2"></a> <a href="#ColorWheel2"><img border="0" src="http://merc.tv/img/itemthis.gif" width="17" height="17"></a> <ul><p> <a target="_blank" href=http://the-light.com/colclick.html> Victor Engel</a> gives you the color codes and sample coding for where your mouse points on his honeycomb color map: </p><p> <a href="1javascr.htm"><img src="http://merc.tv/img/rose.gif" alt="Javascript feature" width="12" height="12" border="0"></a> <img src="http://merc.tv/img/scr/netcolpc.jpg"> </p> </ul> </td><td width="15">&nbsp; </td><td width="40" align="center" bgcolor="#FFFFe0"> <a href="#TopMenu"><img alt="Go to top of page" border =0 src="http://merc.tv/img/topmenu.gif" width="22" height="22"></a> <br /> <a href="#ColorWheelz"><img border="0" src="http://merc.tv/img/wcuptri.gif" width="32" height="22"></a> <br /> <a href="#WellStyledColorz"><img border="0" src="http://merc.tv/img/wcdntri.gif" width="40" height="23"></a> </td></tr></table> <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#FFFFe0"><tr valign="top"><td> <a name="WellStyledColorz"></a> <a href="#WellStyledColorz"><img border="0" src="http://merc.tv/img/itemthis.gif" width="17" height="17"></a> <ul><p> <a target="_blank" href="http://wellstyled.com/tools/colorscheme2/index-en.html"> WellStyled.com</a> has the most features. </p><p> <img src="http://merc.tv/img/scr/wellstyledcolor.png" width="787" height="623"> </p></ul> </td><td width="15">&nbsp; </td><td width="40" align="center" bgcolor="#FFFFe0"> <a href="#TopMenu"><img alt="Go to top of page" border =0 src="http://merc.tv/img/topmenu.gif" width="22" height="22"></a> <br /> <a href="#ColorWheel12"><img border="0" src="http://merc.tv/img/wcuptri.gif" width="32" height="22"></a> <br /> <a href="#ColorAvailability"><img border="0" src="http://merc.tv/img/wcdntri.gif" width="40" height="23"></a> </td></tr></table> <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#FFFFe0"><tr valign="top"><td> <a name="ColorAvailability"></a><h2> <a href="#ColorAvailability"><img border="0" src="http://merc.tv/img/itemthis.gif" width="17" height="17"></a> Availability of Colors</h2> <ul><p> Artists who use pigment paints create colors by mixing a limited number of tubes of paint. </p><p> Donald A. Jusko's "Real Color Wheel" has white dots for colors which can be reproduced <a target="_blank" href="http://www.realcolorwheel.com/RCWDS.htm"> this way </p><p> <img src="http://merc.tv/img/scr/rcw60.jpg" width="302" height="299" border="0"></a> </ul> </td><td><ul> </ul> </td><td width="40" align="center" bgcolor="#FFFFe0"> <a href="#TopMenu"><img alt="Go to top of page" border =0 src="http://merc.tv/img/topmenu.gif" width="22" height="22"></a> <br /> <a href="#WellStyledColorz"><img border="0" src="http://merc.tv/img/wcuptri.gif" width="32" height="22"></a> <br /> <a href="#AltSpecz"><img border="0" src="http://merc.tv/img/wcdntri.gif" width="40" height="23"></a> </td></tr></table> <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#FFFFe0"><tr valign="top"><td> <a name="AltSpecz"></a><h2> <a href="#AltSpecz"><img border="0" src="http://merc.tv/img/itemthis.gif" width="17" height="17"></a> Other Alternatives to Specify Color</h2> <ul><p> <a target="_blank" href="http://en.wikipedia.org/wiki/HSV_color_space"> HSV (Hue, Saturation, Value)</a>, also call HSB (with B for Brightness). <a target="_blank" href="http://www.cs.rit.edu/~ncs/color/t_convert.html"> RGB to HSV conversion algorithms</a> </p><p> HIE (hue, luminosity, and psychometric saturation) </p><p> SIH (Saturation, Intensity, and Hue) </p><p> <a target="_blank" href="http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/home.html"> The International Commission on Lighting</a> (abbreviated CIE from its French name Commission Internationale de l'Êclairage) is the body responsible for international recommendations for photometry and colorimetry. In 1931 it defined the CIELAB (CIE L*a*b*) color space where the same distance within the space represent approximately equal color difference. Variables L*, a* and b* are plotted at right angles to one another. </p><p> <a target="_blank" href="http://www.pantone.com/"> Pantone</a> is a proprietary naming system (color space) the company uses to ensure accurate color on a variety of mediums (ink, paint, plastics, etc.). Their fan book has 1,757 numbered swatches of color. </p><p> <!-- img src=img/scr/sihWheel_sm.png" --> </p><p> </ul> </td><td width="40" align="center" bgcolor="#FFFFe0"> <a href="#TopMenu"><img alt="Go to top of page" border =0 src="http://merc.tv/img/topmenu.gif" width="22" height="22"></a> <br /> <a href="#ColorAvailability"><img border="0" src="http://merc.tv/img/wcuptri.gif" width="32" height="22"></a> <br /> <a href="#Methods"><img border="0" src="http://merc.tv/img/wcdntri.gif" width="40" height="23"></a> </td></tr></table> <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#FFFFe0"><tr valign="top"><td> <a name="Methods"></a><h2> <a href="#Methods"><img border="0" src="http://merc.tv/img/itemthis.gif" width="17" height="17"></a> Programming to Specify Color</h2> <ul><p> <img src="http://merc.tv/img/tool.gif"> <a target="_blank" href="http://www.iconico.com/CSSScrollbar/"> CSS Scrollbar Color Changer</a> generates CSS for colors picked. </p><p> The following HTML example specifies a page with a white background, black text, blue links, and red visited links: <p><ul><div class="code">&lt;BODY bgcolor="#FFFFFF" TEXT="#OOOOOO" Alink="#0000FF" link="#0000FF" Vlink="#FF0000"></div> </ul> </p><p> <table border="1" cellpadding="4" cellspacing="0"><thead> <tr valign="top"> <th> Type of link </th> <th> HTML<br />&LT;body><br />Attribute </th> <th> <a href="1javascr.htm"><img src="http://merc.tv/img/rose.gif" border="0"> Javascript</a><br />Property </th> <th> <a href="1css.htm">CSS</a> Class <br />{ Property </th> <th> Object Model <br />Property</th> <th> <a href="1javaref.htm">Java</a> <br />method</th> </tr></thead><tbody> <tr valign="top"><td> Background image</td> <td><tt>BACKGROUND=</tt> </td> <td>.</td> <td>BACKGROUND-IMAGE: url('x.gif'); <td>backgroundImage</td> <td>.</td> </tr> <tr valign="top"><td> Background color</td> <td><tt>BGCOLOR</tt> </td> <td>bgColor</td> <td>BACKGROUND-COLOR</td> <td>backgroundColor</td> <td> setBackground </td> </tr> <tr valign="top"><td> Foreground color (of text)</td> <td><tt>FGCOLOR</tt> </td> <td>fgColor</td> <td>color: #dda0dd <br /> color: rgb(0,0,255) </td> <td>.</td> <td>setColor</td> </tr> <tr valign="top"><td> The color of unvisited link text </td> <td><tt>link=</tt> </td> <td>linkColor</td> <td>a:link { </td> </tr> <tr valign="top"><td> The (temporary) color of active link text </td> <td><tt>Alink=</tt> </td> <td>alinkColor</td> <td>a:active { </td> </tr> <tr valign="top"><td> The color of visited link text </td> <td><tt>Vlink=</tt> </td> <td>vlinkColor</td> <td>a:visited { </td> </tr> <tr valign="top"><td> text where mouse hovers </td> <td> - </td> <td> - </td> <td>a:hover { </td> </tr> <tr valign="top"><td> Border color (also Style and Width)</td> <td>.</td> <td>.</td> <td>border-color<br />border-top-color<br /><nobr>border-bottom-color</nobr><br />border-left-color<br />border-right-color</td> <td>borderColor<br />borderTopColor<br />borderBottomColor<br />borderLeftColor<br />borderRightColor</td> </tr></tbody></table> <p> The <a href="1javaref.htm">Java</a> coding to change the color to one of the standard colors using a method from the JDE package <strong>java.awt.Color</strong>: </p><p><ul><div class="code">g.setColor( Color.blue );<br /> g.drawString( ... ); </div></ul> </p><p> <img src="http://merc.tv/img/rose.gif" alt="Javascript feature" width="12" height="12" border="0"> <a target="_blank" href="http://www.daltonlp.com/daltonlp.cgi?item_type=1&item_id=174"> Lloyd Dalton</a> shows you Javascript coding for Color select control. </p> </ul> </td><td width="40" align="center"><br /> <a href="#TopMenu"><img alt="Go to top of page" border =0 src="http://merc.tv/img/topmenu.gif" width="22" height="22"></a> <br /> <a href="#AltSpecz"><img border="0" src="http://merc.tv/img/wcuptri.gif" width="32" height="22"></a> <br /> <a href="#Deeperz"><img border="0" src="http://merc.tv/img/wcdntri.gif" width="40" height="23"></a> </td></tr></table> <table cellspacing="0" cellpadding="0" width="100%" bgcolor="#FFFFe0"><tr valign="top"><td> <a name="Deeperz"></a><h2> <a href="#Deeperz"><img border="0" src="http://merc.tv/img/itemthis.gif" width="17" height="17"></a> Digging deeper...</h2> <ul><p> </p><p> Radio, microwave, and infra-red waves have longer <a target="_blank" href="http://imagine.gsfc.nasa.gov/docs/science/know_l1/spectrum_chart.html"> wavelengths</a> than visible light. Longer wavelengths are used to carry communications signals because they penetrate the atmosphere better at less energy than shorter (but higher energy) rays such as Ultra-Violet (UV), x-ray, and gamma rays. </p><p> <a target="_blank" href="http://www.phy.ntnu.edu.tw/java/Rainbow/rainbow.html"> <img align="right" src="http://merc.tv/img/scr/roundrainbow.gif" border="0"></a> </p><p> Differences in wavelength energy is why colors can be refracted apart (chromatic dispersed) by a prism or in a <a target="_blank" href="http://eo.ucar.edu/rainbows/">rainbow</a>. </p><p> <ul> <a class="Scripture" target="bible" href="http://bible.crosswalk.com/OnlineStudyBible/bible.cgi?new=1&section=*&version=nkj&showtools=on&word=Genesis+9:13-16"> <img src="http://merc.tv/img/icons/bible.gif" alt="Scripture" width="16" height="16" border="0"> &#8220;It shall be, when I bring a cloud over the earth, that the <strong>rainbow </strong> shall be seen in the cloud; I will remember My covenant which is between Me and you and every living creature of all flesh; the waters shall never again become a flood to destroy all flesh.&#8221; <nobr>&#8212;Genesis 9:13-16 (NKJV)</a></nobr> </p><p> <a class="Scripture" target="bible" href="http://bible.crosswalk.com/OnlineStudyBible/bible.cgi?new=1&section=*&version=nkj&showtools=on&word=Revelation+10:1"> <img src="http://merc.tv/img/icons/bible.gif" alt="Scripture" width="16" height="16" border="0"> &#8220;I saw still another mighty angel coming down from heaven, clothed with a cloud. And a <strong>rainbow </strong>was on his head ...&#8221; <nobr>&#8212;Revelation 10:1 (NKJV)</a></nobr> </ul> </p><p> </p> </ul> </td><td width="40" align="center"><br /> <a href="#TopMenu"><img alt="Go to top of page" border =0 src="http://merc.tv/img/topmenu.gif" width="22" height="22"></a> <br /> <a href="#Methods"><img border="0" src="http://merc.tv/img/wcuptri.gif" width="32" height="22"></a> <br /> <a href="#Bottom"><img border="0" src="http://merc.tv/img/wcdntri.gif" width="40" height="23"></a> </td></tr></table> <a name="Bottom"></a> <center><p class="Byline" align="center"> Portions &copy;Copyright 1996-2011 Wilson Mar. All rights reserved. | <a target="_blank" href="privacy.htm">Privacy Policy</a> | <a class="Byline" href="javascript:alert('This%20page%20was%20last%20updated '+window.document.lastModified+' CST');">Last updated</a> </p></center> <p> <p id=TopicHead align="left"> Related: <br /> <li class="Itemgo"><a class="TopicChoice" href="1projweb.htm"> Website Development</a></li> <li class="Itemgo"><a class="TopicChoice" href="1wtools.htm"> HTML Coding</a></li> <p> <table bgcolor=#CFCFCF width="100%" border="0"><tr valign="top"><td align="center" rowspan="2" width="72"><br /> <a href="1service.htm"><img hspace="0" src="http://merc.tv/img/wilson/wilson2007.jpg" width="60" height="80" alt="How I may help" border="0" /></a> <p align="center"> <script language="JavaScript" type="text/javascript"> <!-- document.write('<a href=\"mai'+'lto:wilsonmar&#64;'gmail.com?Subject=About '+'http://www.wilsonmar.com/1colors.htm' + '\">'); // End --> </script> <img src="http://merc.tv/img/mailto.gif" border="0" alt="Send a message with your email client program" width="36" height="20"></a> </td><td colspan="2" align="left"> <form name="fmCmt" action="../asp/takemail.asp" method="post"> <input type="hidden" name="emailsubject" value="1colors.htm"> <input type="hidden" name="action" value="vote"> <span class="BotmText"><br />Your rating of this page: <br /><strong>Low <input type="radio" name="rating" value="1"> <input type="radio" name="rating" value="2"> <input type="radio" name="rating" value="3"> <input type="radio" name="rating" value="4"> <input type="radio" name="rating" value="5"> High</strong><br /> <br /> <label id="BotmText" for="Comments" accesskey="C">Your <span style="text-decoration:underline">c</span>omments on this topic, please:</label><br /> <textarea class="feedback" name="Comments" id="Comments" accesskey="C" rows="7" cols="35"></textarea> <br /><input type=checkbox name="pubthis" id="pubthis" value="X" CHECKED><label for="pubthis" accesskey="P"> <span style="text-decoration:underline">P</span>ublish this comment publicly</label> </td><td align="left"><br /><span class="BotmText"> Your first <span style="text-decoration:underline">n</span>ame: <br /><input type="TEXT" id="Name" name="friendname" accesskey="N" value=" " size="30" maxlength=70> <br />Your famil<span style="text-decoration:underline">y</span> name: <br /><input type="TEXT" id="Name" name="friendfame" accesskey="F" value=" " size="30" maxlength=70> <br />Your <span style="text-decoration:underline">l</span>ocation (city, country): <br /><input type="TEXT" id="Name" name="Loc" accesskey="L" value=" " size="30" maxlength=70> <br /><span style="text-decoration:underline">Y</span>our Email address:&nbsp;<br /><input type="TEXT" id="Email" name="emailaddr" accesskey="Y" value="__@__.__" size="30" maxlength=70> <br /><input type=checkbox name="subscribe" id="subscribe" value="X" CHECKED><label for="subscribe" accesskey="U"> Email me <span style="text-decoration:underline">u</span>pdates</label> <br /><input type="hidden" name="ref"> <br /><input type=SUBMIT name="submit" value="Send" onclick="takemsg();document.fmCmt.ref.value=document.referrer;document.fmCmt.submit();return false;"> </form></span> </td><td width="1">&nbsp; </td><td align="right"> <a class="Itemsep" href="#TopMenu">Top of Pa<span style="text-decoration:underline">g</span>e<img align=TOP src="http://merc.tv/img/topmenu.gif" width=22 height=22 border="0" alt="Go to top of page"></a> <p> <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_xclick"> <input type="hidden" name="business" value="wilsonmar@hotmail.com"> <input type="hidden" name="item_name" value="Donation"> <input type="hidden" name="item_number" value="1colors.htm"> <input type="hidden" name="no_shipping" value="1"> <input type="hidden" name="return" value="http://www.wilsonmar.com/msgthanks.htm"> <input type="hidden" name="cancel_return" value="http://www.wilsonmar.com/default.asp"> <input type="image" src="http://images.paypal.com/images/x-click-but04.gif" border="0" name="submit" alt="Send money with PayPal"> </form> Thank you! </td></tr></table> <p>&nbsp;</P> </body> </html>