Full version: jsB@nk » Utility » Generator » Set Color Wizard
URL: https://www.javascriptbank.com/set-color-wizard.html
Use the color sliders to show you the HEX code for the color to use in your site.
Full version: jsB@nk » Utility » Generator » Set Color Wizard
URL: https://www.javascriptbank.com/set-color-wizard.html
<style type="text/css"><!--caption{color:#0000FF;font-weight:bold;font-size:1.5em;text-align:center}thead th, tfoot{color:#FFFFFF;font-weight:bold;border:none}td, th{border:0px}table{border-width:5px;border-style:outset;border-color:#0080FF;background-color:#0080FF}input{width:100%;background-color:#0040FF;color:#FFFFFF}input.button{width:40%;border-style:double;border-width:3px}div.maxcolorbar{width:255px;height:16px;border-color:#0080FF;border-style:inset;position:relative;top:0px;left:0px}div.colorbar{width:255px;height:16px;cursor:hand}--></style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script lagnuage='javascript' type='text/javascript'><!--var r;var y="";var RB=document.getElementById?document.getElementById("rb"):document.all.rb;var GB=document.getElementById?document.getElementById("gb"):document.all.gb;var BB=document.getElementById?document.getElementById("bb"):document.all.bb;var TOT=document.forms.color.tot;var TTT=document.getElementById?document.getElementById("ttt"):document.all.ttt;var mycolor=new Object();function numtohex(input){ var t="0123456789ABCDEF"; return (t.charAt(input>>4)+t.charAt(input%16));}function s(){ document.forms.color.r1.value=mycolor.r; document.forms.color.g1.value=mycolor.g; document.forms.color.b1.value=mycolor.b; document.forms.color.r2.value=numtohex(mycolor.r); document.forms.color.g2.value=numtohex(mycolor.g); document.forms.color.b2.value=numtohex(mycolor.b); RB.style.width=mycolor.r+"px"; GB.style.width=mycolor.g+"px"; BB.style.width=mycolor.b+"px"; TOT.value="#"+numtohex(mycolor.r)+numtohex(mycolor.g)+numtohex(mycolor.b); TTT.style.color=TOT.value;}function check(){ var i=TOT.value.toString(); if(i.charAt(0)=="#")i=i.substr(1,6); while(i.length<6)i+="0"; i=i.toUpperCase(); var r=i.substr(0,2); var g=i.substr(2,2); var b=i.substr(4,2); if(!r.match(/[^0-9a-fA-F]/i))mycolor.r=parseInt(r,16); if(!g.match(/[^0-9a-fA-F]/i))mycolor.g=parseInt(g,16); if(!b.match(/[^0-9a-fA-F]/i))mycolor.b=parseInt(b,16); s();}function checka(){ var i=document.forms.color[r+"2"].value; while(i.toString().length<2)i="0"+i; i=i.toUpperCase(); if(!i.match(/[^0-9a-fA-F]/i))mycolor[r]=parseInt(i,16); s();}function checkb(){ var i=document.forms.color[r+"1"].value if(isNaN(i))i=mycolor[r] if(Number(i)>255)i=255 if(Number(i)<0)i=0 mycolor[r]=i s()}function checkc(e){ if(!e)e=event if(y==""){ y=r mycolor[r]=parseInt(document.all?e.offsetX:e.layerX) s()}}function m(e){ if(!e)e=event; if(y=="")return false; var x=parseInt(document.all?e.offsetX:e.layerX); if(x<0)x=0; if(x>255)x=255; mycolor[r]=x; s();}function update_source(){ var tmp="<style type=\"text/css\"><!--\nbody,html{\n"; if(mycolor.bg!='')tmp+="background-color:"+mycolor.bg+";\n"; if(mycolor.c!='')tmp+="color:"+mycolor.c+";\n"; if(mycolor.sb!='')tmp+="scrollbar-base-color:"+mycolor.sb+";\n"; if(mycolor.sf!='')tmp+="scrollbar-face-color:"+mycolor.sf+";\n"; if(mycolor.s3!='')tmp+="scrollbar-3dlight-color:"+mycolor.s3+";\n"; if(mycolor.sd!='')tmp+="scrollbar-darkshadow-color:"+mycolor.sd+";\n"; if(mycolor.st!='')tmp+="scrollbar-track-color:"+mycolor.st+";\n"; if(mycolor.sa!='')tmp+="scrollbar-arrow-color:"+mycolor.sa+";\n"; if(mycolor.sh!='')tmp+="scrollbar-highlight-color:"+mycolor.sh+";\n"; tmp+="}\n--><\/style>"; document.forms.color.css_code.value=tmp;}function resetit(){ document.body.style.backgroundColor=''; document.body.style.color=''; document.documentElement.style.scrollbarBaseColor=''; document.documentElement.style.scrollbarFaceColor=''; document.documentElement.style.scrollbar3dLightColor=''; document.documentElement.style.scrollbarDarkShadowColor=''; document.documentElement.style.scrollbarTrackColor=''; document.documentElement.style.scrollbarArrowColor=''; document.documentElement.style.scrollbarHighlightColor=''; mycolor.r=255; mycolor.g=255; mycolor.b=255; mycolor.bg=''; mycolor.c=''; mycolor.sb=''; mycolor.sf=''; mycolor.s3=''; mycolor.sd=''; mycolor.st=''; mycolor.sa=''; mycolor.sh=''; s(); update_source();}var changebgcolor=function(){mycolor.bg=document.body.style.backgroundColor=TTT.style.color;update_source()}var changetextcolor=function(){mycolor.c=document.body.style.color=TTT.style.color;update_source()}var changescrollbarcolor1=function(){mycolor.sb=document.documentElement.style.scrollbarBaseColor=TTT.style.color;update_source()}var changescrollbarcolor2=function(){mycolor.sf=document.documentElement.style.scrollbarFaceColor=TTT.style.color;update_source()}var changescrollbarcolor3=function(){mycolor.s3=document.documentElement.style.scrollbar3dLightColor=TTT.style.color;update_source()}var changescrollbarcolor4=function(){mycolor.sd=document.documentElement.style.scrollbarDarkShadowColor=TTT.style.color;update_source()}var changescrollbarcolor5=function(){mycolor.st=document.documentElement.style.scrollbarTrackColor=TTT.style.color;update_source()}var changescrollbarcolor6=function(){mycolor.sa=document.documentElement.style.scrollbarArrowColor=TTT.style.color;update_source()}var changescrollbarcolor7=function(){mycolor.sh=document.documentElement.style.scrollbarHighlightColor=TTT.style.color;update_source()}document.body.onmouseup=function(){y=''};resetit();--></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><form name="color"><table border="3" cellspacing="0" cellpadding="3" align="center" unselectable="on"><caption style="text-align:center">Set Color Wizard - Second Edition</caption><col width="50"><col width="55"><col width="75"><col width="260"><thead><tr><td colspan="4" align="center" style="border-style:solid;border-color:#000000;border-width:3px;text-align:center;width:440px"><b id="ttt" style="background-color:expression(this.style.color)">The color show at here</b></td></tr><tr><th width="50">Color</th><th width="55">Dec</th><th width="75">Hex</th><th width="260">Ratio</th></tr></thead><tbody><tr><th style="color:#FF0000">Red(R)</th><td><input type="text" onchange="r='r';checkb()" size="3" maxlength="3" name="r1" value="0"></td><td><input type="text" onchange="r='r';checka()" size="2" maxlength="2" name="r2" value="00"></td><td><div class="maxcolorbar"><div style="background-color:#800000" id="crb" class="colorbar" onmousedown="r='r';checkc(event)" onmousemove="m(event)" onmouseup="y=''" onselectstart="return false"><div style="background-color:#FF0000;width:255px;height:16px" id="rb"></div></div></div></td></tr><tr><th style="color:#00FF00">Green(G)</th><td><input type="text" onchange="r='g';checkb()" size="3" maxlength="3" name="g1" value="0"></td><td><input type="text" onchange="r='g';checka()" size="2" maxlength="2" name="g2" value="00"></td><td><div class="maxcolorbar"><div style="background-color:#008000" id="cgb" class="colorbar" onmousedown="r='g';checkc(event)" onmousemove="m(event)" onmouseup="y=''" onselectstart="return false"><div style="background-color:#00FF00;width:255px;height:16px" id="gb"></div></div></div></td></tr><tr><th style="color:#0000FF">Blue(B)</th><td><input type="text" onchange="r='b';checkb()" size="3" maxlength="3" name="b1" value="0"></td><td><input type="text" onchange="r='b';checka()" size="2" maxlength="2" name="b2" value="00"></td><td><div class="maxcolorbar" ><div style="background-color:#000080" id="cbb" class="colorbar" onmousedown="r='b';checkc(event)" onmousemove="m(event)" onmouseup="y=''" onselectstart="return false"><div style="background-color:#0000FF;width:256px;height:16px" id="bb"></div></div></div></td></tr></tbody><tfoot><tr><th colspan="2">RGB Value</th><td><input type="text" onchange="check()" size="7" maxlength="7" name="tot" value="#000000"></td><th><input type="button" onclick="changebgcolor()" value="Set Back color" class="button"><input type="button" onclick="changetextcolor()" value="Set Text color" class="button"></th></tr><tr><th colspan="3">Scrollbar setting</th><th><input type="button" onclick="changescrollbarcolor1()" value="Base"class="button"></th></tr><tr><th colspan="4"><input type="button" onclick="changescrollbarcolor2()" value="Face"class="button"><input type="button" onclick="changescrollbarcolor3()" value="3DLight"class="button"></th></tr><tr><th colspan="4"><input type="button" onclick="changescrollbarcolor4()" value="DarkShadow"class="button"><input type="button" onclick="changescrollbarcolor5()" value="Track"class="button"></th><tr></tr><th colspan="4"><input type="button" onclick="changescrollbarcolor6()" value="Arrow"class="button"><input type="button" onclick="changescrollbarcolor7()" value="HighLight"class="button"></th></tr><tr><td colspan="4">Copy the following code to <head></head> can set your site as this color<br><textarea name="css_code" cols="60" rows="10"></textarea></td></tr><tr><th colspan="4"><input type="button" onclick="resetit()" value="Reset" class="button"></th></tr></tfoot></table></form><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->