Full version: jsB@nk » Utility » Generator » HTML Color Editor tool
URL: https://www.javascriptbank.com/html-color-editor-tool.html
If you've worked with graphics programs, you should be familiar with the Color Editor. Well, this script renders a interface similar to it for you to conveniently look up the corresponding value of any color.
Full version: jsB@nk » Utility » Generator » HTML Color Editor tool
URL: https://www.javascriptbank.com/html-color-editor-tool.html
<STYLE type=text/css>TD {FONT-SIZE: 8pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}INPUT {FONT-SIZE: 8pt; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=javascript><!--// Microsoft or Netscape ?var micro=false;if (navigator.appName.substr(0,5)=="Micro") micro=true;// Old Color and Current Colorif (window.opener && window.opener.oldColor)oldcol=window.opener.oldColor;else oldcol="FFFFFF";curcol=oldcol;// Predefined Colorspcoc = getCookie("predefcolors");if (!pcoc) pcoc="FFFFFF,FFFFFF,FFFFFF,FFFFFF,FFFFFF,FFFFFF,FFFFFF,FFFFFF,"+"FFFFFF,FFFFFF,FFFFFF,FFFFFF,FFFFFF,FFFFFF,FFFFFF,FFFFFF";precol= new Array(16);precol=pcoc.split(",",16);// Predefined Colors CursorcursorImg=new Image ();cursorImg.src="cursor.gif";blankImg=new Image ();blankImg.src="blank.gif";cursorPos=1;// Other Stuffhexchars="0123456789ABCDEF";// Funktionsfunction setCookie(name, value, expire) { document.cookie = name + "=" + escape(value) + ((expire == null) ? "" : ("; expires=" + expire.toGMTString()))}function transferColor () {today= new Date();expires= new Date ()expires.setTime(today.getTime() + 1000*60*60*24*365)setCookie("predefcolors",precol.join(","),expires);if (window.opener)window.opener.setColor(curcol);}function getCookie(Name) { var search = Name + "=" if (document.cookie.length > 0) { // if there are any cookies offset = document.cookie.indexOf(search) if (offset != -1) { // if cookie exists offset += search.length // set index of beginning of value end = document.cookie.indexOf(";", offset) // set index of end of cookie value if (end == -1) end = document.cookie.length return unescape(document.cookie.substring(offset, end)) } }}function fromhex(inval) {out=0;for (a=inval.length-1;a>=0;a--) out+=Math.pow(16,inval.length-a-1)*hexchars.indexOf(inval.charAt(a));return out;}function tohex(inval) {out=hexchars.charAt(inval/16);out+=hexchars.charAt(inval%16);return out;}function setPreColors () {for (a=1;a<=16;a++) {if (!micro) eval ("document.precell"+a+".bgColor=precol["+(a-1)+"]");else eval ("document.all('precell"+a+"').bgColor=precol["+(a-1)+"]");}}function definePreColor () {precol[cursorPos-1]=curcol;setPreColors();setCursor(cursorPos+1>16?1:cursorPos+1);}function preset (what) {set (precol[what-1]);setCursor(what);}function setCursor(what) {if (!micro) {cursorPos=what;eval ("document.cursorLayer.pageX=document.precell"+cursorPos+".pageX");eval ("document.cursorLayer.pageY=document.precell"+cursorPos+".pageY-1");} else {eval ("document.preimg"+cursorPos+".src=blankImg.src");cursorPos=what;eval ("document.preimg"+cursorPos+".src=cursorImg.src");}}function set(color) {color=color.toUpperCase();if (!micro) document.thecell.bgColor=color;else document.all("thecell").bgColor=color;document.theform.rtext.value=(fromhex(color.substr(0,2)));document.theform.gtext.value=(fromhex(color.substr(2,2)));document.theform.btext.value=(fromhex(color.substr(4,2)));document.htmlform.htmlcolor.value=color;curcol=color;setCursor(cursorPos);}function setOldColor () {if (!micro) document.theoldcell.bgColor=oldcol;else document.all("theoldcell").bgColor=oldcol;}function setFromRGB () {r=document.theform.rtext.value;g=document.theform.gtext.value;b=document.theform.btext.value;if (r>255||r<0||g>255||g<0||g>255||g<0) {set(curcol);return;}set(tohex(r)+tohex(g)+tohex(b));}function setFromHTML () {inval=document.htmlform.htmlcolor.value.toUpperCase();if (inval.length!=6) {set(curcol);return;}for (a=0;a<6;a++) if (hexchars.indexOf(inval.charAt(a))==-1) {set(curcol);return;}set (inval);}// --> </SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY bgColor=#bfbfbf onload=setPreColors();setCursor(cursorPos);set(curcol);setOldColor();><TABLE cellSpacing=2 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD align=middle>Basic Colors</TD> <TD align=middle>Current Color</TD> <TD align=middle>Old Color</TD></TR> <TR> <TD align=middle><!-- ************** BASIC COLORS PALETTE ******************** --> <TABLE cellSpacing=0 cellPadding=0 border=1> <TBODY> <TR height=14> <TD width=14 bgColor=#ff0000 height=14><A href="javascript:set('ff0000')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#400000 height=14><A href="javascript:set('400000')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#800000 height=14><A href="javascript:set('800000')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#c00000 height=14><A href="javascript:set('c00000')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#ff4040 height=14><A href="javascript:set('ff4040')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#ff8080 height=14><A href="javascript:set('ff8080')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#ffc0c0 height=14><A href="javascript:set('ffc0c0')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#000000 height=14><A href="javascript:set('000000')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD></TR> <TR height=14> <TD width=14 bgColor=#ffff00 height=14><A href="javascript:set('ffff00')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#404000 height=14><A href="javascript:set('404000')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#808000 height=14><A href="javascript:set('808000')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#c0c000 height=14><A href="javascript:set('c0c000')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#ffff40 height=14><A href="javascript:set('ffff40')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#ffff80 height=14><A href="javascript:set('ffff80')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#ffffc0 height=14><A href="javascript:set('ffffc0')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#202020 height=14><A href="javascript:set('202020')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD></TR> <TR height=14> <TD width=14 bgColor=#00ff00 height=14><A href="javascript:set('00ff00')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#004000 height=14><A href="javascript:set('004000')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#008000 height=14><A href="javascript:set('008000')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#00c000 height=14><A href="javascript:set('00c000')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#40ff40 height=14><A href="javascript:set('40ff40')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#80ff80 height=14><A href="javascript:set('80ff80')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#c0ffc0 height=14><A href="javascript:set('c0ffc0')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#404040 height=14><A href="javascript:set('404040')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD></TR> <TR height=14> <TD width=14 bgColor=#00ffff height=14><A href="javascript:set('00ff00')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#004040 height=14><A href="javascript:set('004040')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#008080 height=14><A href="javascript:set('008080')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#00c0c0 height=14><A href="javascript:set('00c0c0')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#40ffff height=14><A href="javascript:set('40ffff')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#80ffff height=14><A href="javascript:set('80ffff')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#c0ffff height=14><A href="javascript:set('c0ffff')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#808080 height=14><A href="javascript:set('808080')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD></TR> <TR height=14> <TD width=14 bgColor=#0000ff height=14><A href="javascript:set('0000ff')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#000040 height=14><A href="javascript:set('000040')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#000080 height=14><A href="javascript:set('000080')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#0000c0 height=14><A href="javascript:set('0000c0')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#4040ff height=14><A href="javascript:set('4040ff')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#8080ff height=14><A href="javascript:set('8080ff')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#c0c0ff height=14><A href="javascript:set('c0c0ff')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#c0c0c0 height=14><A href="javascript:set('c0c0c0')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD></TR> <TR height=14> <TD width=14 bgColor=#ff00ff height=14><A href="javascript:set('ff00ff')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#400040 height=14><A href="javascript:set('400040')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#800080 height=14><A href="javascript:set('800080')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#c000c0 height=14><A href="javascript:set('c000c0')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#ff40ff height=14><A href="javascript:set('ff40ff')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#ff80ff height=14><A href="javascript:set('ff80ff')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#ffc0ff height=14><A href="javascript:set('ffc0ff')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD> <TD width=14 bgColor=#ffffff height=14><A href="javascript:set('ffffff')"><IMG height=14 src="blank.gif" width=14 border=0></A></TD></TR></TBODY></TABLE></TD> <TD vAlign=top><!-- ************** RGB INPUT ******************** --> <TABLE cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR> <FORM name=theform> <TD vAlign=center><INPUT maxLength=3 onchange=setFromRGB() size=3 value=255 name=rtext> R<BR><INPUT maxLength=3 onchange=setFromRGB() size=3 value=255 name=gtext> G<BR><INPUT maxLength=3 onchange=setFromRGB() size=3 value=255 name=btext> B </TD></FORM> <TD><!-- ************** Display New Color ******************** --> <TABLE cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR height=10> <TD width=75 colSpan=3 height=10></TD></TR> <TR height=53> <TD width=10 height=53></TD> <TD id=thecell width=55 bgColor=#ffffff height=53> <TABLE cellSpacing=0 cellPadding=0 border=1> <TBODY> <TR> <TD><ILAYER bgcolor="#ffffff" name="thecell" below><IMG height=53 src="blank.gif" width=55 border=0></ILAYER></TD></TR></TBODY></TABLE></TD> <TD width=10 height=53></TD></TR> <TR height=10> <TD width=75 colSpan=3 height=10></TD></TR></TBODY></TABLE></TD></TR> <TR> <TD colSpan=2> <FORM name=htmlform><INPUT maxLength=6 onchange=setFromHTML() size=6 value=FFFFFF name=htmlcolor> HTML</FORM></TD></TR></TBODY></TABLE></TD> <TD vAlign=top><!-- ************** Display Old Color ******************** --> <TABLE cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR height=10> <TD width=75 colSpan=3 height=10></TD></TR> <TR height=53> <TD width=10 height=53></TD> <TD id=theoldcell width=55 bgColor=#ffffff height=53> <TABLE cellSpacing=0 cellPadding=0 border=1> <TBODY> <TR> <TD><ILAYER bgcolor="#ffffff" name="theoldcell" below><IMG height=53 src="blank.gif" width=55 border=0></ILAYER></TD></TR></TBODY></TABLE></TD> <TD width=10 height=53></TD></TR> <TR height=10> <TD width=75 colSpan=3 height=10></TD></TR></TBODY></TABLE></TD></TR> <TR height=5> <TD colSpan=3 height=5></TD></TR> <TR> <TD align=middle>Custom Colors</TD></TR> <TR> <TD align=middle><!-- ************** Custom Colors ******************** --> <TABLE cellSpacing=0 cellPadding=0 border=1> <TBODY> <TR height=14> <TD id=precell1 width=14 bgColor=#ffffff height=14><ILAYER bgcolor="#ffffff" name="precell1" below><A href="javascript:preset(1)"><IMG height=14 src="blank.gif" width=14 border=0 name=preimg1></A></ILAYER></TD> <TD id=precell2 width=14 bgColor=#ffffff height=14><ILAYER bgcolor="#ffffff" name="precell2" below><A href="javascript:preset(2)"><IMG height=14 src="blank.gif" width=14 border=0 name=preimg2></A></ILAYER></TD> <TD id=precell3 width=14 bgColor=#ffffff height=14><ILAYER bgcolor="#ffffff" name="precell3" below><A href="javascript:preset(3)"><IMG height=14 src="blank.gif" width=14 border=0 name=preimg3></A></ILAYER></TD> <TD id=precell4 width=14 bgColor=#ffffff height=14><ILAYER bgcolor="#ffffff" name="precell4" below><A href="javascript:preset(4)"><IMG height=14 src="blank.gif" width=14 border=0 name=preimg4></A></ILAYER></TD> <TD id=precell5 width=14 bgColor=#ffffff height=14><ILAYER bgcolor="#ffffff" name="precell5" below><A href="javascript:preset(5)"><IMG height=14 src="blank.gif" width=14 border=0 name=preimg5></A></ILAYER></TD> <TD id=precell6 width=14 bgColor=#ffffff height=14><ILAYER bgcolor="#ffffff" name="precell6" below><A href="javascript:preset(6)"><IMG height=14 src="blank.gif" width=14 border=0 name=preimg6></A></ILAYER></TD> <TD id=precell7 width=14 bgColor=#ffffff height=14><ILAYER bgcolor="#ffffff" name="precell7" below><A href="javascript:preset(7)"><IMG height=14 src="blank.gif" width=14 border=0 name=preimg7></A></ILAYER></TD> <TD id=precell8 width=14 bgColor=#ffffff height=14><ILAYER bgcolor="#ffffff" name="precell8" below><A href="javascript:preset(8)"><IMG height=14 src="blank.gif" width=14 border=0 name=preimg8></A></ILAYER></TD></TR> <TR height=14> <TD id=precell9 width=14 bgColor=#ffffff height=14><ILAYER bgcolor="#ffffff" name="precell9" below><A href="javascript:preset(9)"><IMG height=14 src="blank.gif" width=14 border=0 name=preimg9></A></ILAYER></TD> <TD id=precell10 width=14 bgColor=#ffffff height=14><ILAYER bgcolor="#ffffff" name="precell10" below><A href="javascript:preset(10)"><IMG height=14 src="blank.gif" width=14 border=0 name=preimg10></A></ILAYER></TD> <TD id=precell11 width=14 bgColor=#ffffff height=14><ILAYER bgcolor="#ffffff" name="precell11" below><A href="javascript:preset(11)"><IMG height=14 src="blank.gif" width=14 border=0 name=preimg11></A></ILAYER></TD> <TD id=precell12 width=14 bgColor=#ffffff height=14><ILAYER bgcolor="#ffffff" name="precell12" below><A href="javascript:preset(12)"><IMG height=14 src="blank.gif" width=14 border=0 name=preimg12></A></ILAYER></TD> <TD id=precell13 width=14 bgColor=#ffffff height=14><ILAYER bgcolor="#ffffff" name="precell13" below><A href="javascript:preset(13)"><IMG height=14 src="blank.gif" width=14 border=0 name=preimg13></A></ILAYER></TD> <TD id=precell14 width=14 bgColor=#ffffff height=14><ILAYER bgcolor="#ffffff" name="precell14" below><A href="javascript:preset(14)"><IMG height=14 src="blank.gif" width=14 border=0 name=preimg14></A></ILAYER></TD> <TD id=precell15 width=14 bgColor=#ffffff height=14><ILAYER bgcolor="#ffffff" name="precell15" below><A href="javascript:preset(15)"><IMG height=14 src="blank.gif" width=14 border=0 name=preimg15></A></ILAYER></TD> <TD id=precell16 width=14 bgColor=#ffffff height=14><ILAYER bgcolor="#ffffff" name="precell16" below><A href="javascript:preset(16)"><IMG height=14 src="blank.gif" width=14 border=0 name=preimg16></A></ILAYER></TD></TR></TBODY></TABLE></TD> <TD vAlign=bottom align=middle colSpan=2 rowSpan=2> <FORM><INPUT onclick=transferColor();window.close() type=button value= OK > <INPUT onclick=transferColor(); type=button value=Apply> <INPUT onclick=window.close() type=button value=Cancel> </FORM></TD></TR></TR> <TR> <TD align=middle> <FORM><INPUT onclick=definePreColor() type=button value="Add Custom"></FORM></TD></TR></TBODY></TABLE><!-- *************** define the Cursor-Layer (Netcape only)************* --><LAYER name="cursorLayer" visibility="show" width="14" above><SCRIPT language=javascript> if (!micro) document.write("<a href='javascript:preset(cursorPos)'><img border=0 src='cursor.gif'></a>");// --></SCRIPT></LAYER></BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->