Full version: jsB@nk » Utility » Colour Sampler
URL: https://www.javascriptbank.com/colour-sampler.html
This is a helpful script for testing the legibility of specific colour combinations while designing web pages. This JavaScript allows users to select a background colour for the web page and place text in different colour, size, and typeface combinations on top of it thus enabling them to instantly check various colour schemes. This is a timesaving tool for web designers.
Full version: jsB@nk » Utility » Colour Sampler
URL: https://www.javascriptbank.com/colour-sampler.html
<script language="javascript" type="text/javascript">function theColor(cvalue) { if (document.menu.colorer[0].checked) { document.menu.color1.value = cvalue; } if (document.menu.colorer[1].checked) { document.menu.color2.value = cvalue; } }function sampleIt() { var I = ""; var B = ""; var U = ""; if (document.menu.italics.checked == true) { I = "<i>"; } if (document.menu.bold.checked == true) { B = "<b>"; } if (document.menu.underline.checked == true) { U = "<u>"; } x = parseInt(window.screen.width) / 2 - 250; y = parseInt(window.screen.height) / 2 - 150; popWin = window.open('','NewWin', "toolbar=no,status=no,menubar=no,scrollbars,width=500,height=300"); { message = "<title>Color Sample!</title><body bgcolor='" + document.menu.color1.value + "'" + ">"; message += "<center><div align='center'><br /><font face='" + document.menu.fonter.value + "' size='" + (document.menu.sizer.selectedIndex + 1) + "' color='" + document.menu.color2.value + "'>"; message += I + B + U + document.menu.texter.value + "</font></div></center></body>"; popWin.document.write(message); popWin.focus(); if (navigator.appName.indexOf("Explorer")!= -1) { popWin.location.reload(); } popWin.moveTo(x,y); } }</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><map name="spmap"> <area shape="rect" coords=1,1,7,10 href="javascript:color_is_('#00ff00')"> <area shape="rect" coords=9,1,15,10 href="javascript:theColor('#00ff33')"> <area shape="rect" coords=17,1,23,10 href="javascript:theColor('#00ff66')"> <area shape="rect" coords=25,1,31,10 href="javascript:theColor('#00ff99')"> <area shape="rect" coords=33,1,39,10 href="javascript:theColor('#00ffcc')"> <area shape="rect" coords=41,1,47,10 href="javascript:theColor('#00ffff')"> <area shape="rect" coords=49,1,55,10 href="javascript:theColor('#33ff00')"> <area shape="rect" coords=57,1,63,10 href="javascript:theColor('#33ff33')"> <area shape="rect" coords=65,1,71,10 href="javascript:theColor('#33ff66')"> <area shape="rect" coords=73,1,79,10 href="javascript:theColor('#33ff99')"> <area shape="rect" coords=81,1,87,10 href="javascript:theColor('#33ffcc')"> <area shape="rect" coords=89,1,95,10 href="javascript:theColor('#33ffff')"> <area shape="rect" coords=97,1,103,10 href="javascript:theColor('#66ff00')"> <area shape="rect" coords=105,1,111,10 href="javascript:theColor('#66ff33')"> <area shape="rect" coords=113,1,119,10 href="javascript:theColor('#66ff66')"> <area shape="rect" coords=121,1,127,10 href="javascript:theColor('#66ff99')"> <area shape="rect" coords=129,1,135,10 href="javascript:theColor('#66ffcc')"> <area shape="rect" coords=137,1,143,10 href="javascript:theColor('#66ffff')"> <area shape="rect" coords=145,1,151,10 href="javascript:theColor('#99ff00')"> <area shape="rect" coords=153,1,159,10 href="javascript:theColor('#99ff33')"> <area shape="rect" coords=161,1,167,10 href="javascript:theColor('#99ff66')"> <area shape="rect" coords=169,1,175,10 href="javascript:theColor('#99ff99')"> <area shape="rect" coords=177,1,183,10 href="javascript:theColor('#99ffcc')"> <area shape="rect" coords=185,1,191,10 href="javascript:theColor('#99ffff')"> <area shape="rect" coords=193,1,199,10 href="javascript:theColor('#ccff00')"> <area shape="rect" coords=201,1,207,10 href="javascript:theColor('#ccff33')"> <area shape="rect" coords=209,1,215,10 href="javascript:theColor('#ccff66')"> <area shape="rect" coords=217,1,223,10 href="javascript:theColor('#ccff99')"> <area shape="rect" coords=225,1,231,10 href="javascript:theColor('#ccffcc')"> <area shape="rect" coords=233,1,239,10 href="javascript:theColor('#ccffff')"> <area shape="rect" coords=241,1,247,10 href="javascript:theColor('#ffff00')"> <area shape="rect" coords=249,1,255,10 href="javascript:theColor('#ffff33')"> <area shape="rect" coords=257,1,263,10 href="javascript:theColor('#ffff66')"> <area shape="rect" coords=265,1,271,10 href="javascript:theColor('#ffff99')"> <area shape="rect" coords=273,1,279,10 href="javascript:theColor('#ffffcc')"> <area shape="rect" coords=281,1,287,10 href="javascript:theColor('#ffffff')"> <area shape="rect" coords=1,12,7,21 href="javascript:theColor('#00cc00')"> <area shape="rect" coords=9,12,15,21 href="javascript:theColor('#00cc33')"> <area shape="rect" coords=17,12,23,21 href="javascript:theColor('#00cc66')"> <area shape="rect" coords=25,12,31,21 href="javascript:theColor('#00cc99')"> <area shape="rect" coords=33,12,39,21 href="javascript:theColor('#00cccc')"> <area shape="rect" coords=41,12,47,21 href="javascript:theColor('#00ccff')"> <area shape="rect" coords=49,12,55,21 href="javascript:theColor('#33cc00')"> <area shape="rect" coords=57,12,63,21 href="javascript:theColor('#33cc33')"> <area shape="rect" coords=65,12,71,21 href="javascript:theColor('#33cc66')"> <area shape="rect" coords=73,12,79,21 href="javascript:theColor('#33cc99')"> <area shape="rect" coords=81,12,87,21 href="javascript:theColor('#33cccc')"> <area shape="rect" coords=89,12,95,21 href="javascript:theColor('#33ccff')"> <area shape="rect" coords=97,12,103,21 href="javascript:theColor('#66cc00')"> <area shape="rect" coords=105,12,111,21 href="javascript:theColor('#66cc33')"> <area shape="rect" coords=113,12,119,21 href="javascript:theColor('#66cc66')"> <area shape="rect" coords=121,12,127,21 href="javascript:theColor('#66cc99')"> <area shape="rect" coords=129,12,135,21 href="javascript:theColor('#66cccc')"> <area shape="rect" coords=137,12,143,21 href="javascript:theColor('#66ccff')"> <area shape="rect" coords=145,12,151,21 href="javascript:theColor('#99cc00')"> <area shape="rect" coords=153,12,159,21 href="javascript:theColor('#99cc33')"> <area shape="rect" coords=161,12,167,21 href="javascript:theColor('#99cc66')"> <area shape="rect" coords=169,12,175,21 href="javascript:theColor('#99cc99')"> <area shape="rect" coords=177,12,183,21 href="javascript:theColor('#99cccc')"> <area shape="rect" coords=185,12,191,21 href="javascript:theColor('#99ccff')"> <area shape="rect" coords=193,12,199,21 href="javascript:theColor('#cccc00')"> <area shape="rect" coords=201,12,207,21 href="javascript:theColor('#cccc33')"> <area shape="rect" coords=209,12,215,21 href="javascript:theColor('#cccc66')"> <area shape="rect" coords=217,12,223,21 href="javascript:theColor('#cccc99')"> <area shape="rect" coords=225,12,231,21 href="javascript:theColor('#cccccc')"> <area shape="rect" coords=233,12,239,21 href="javascript:theColor('#ccccff')"> <area shape="rect" coords=241,12,247,21 href="javascript:theColor('#ffcc00')"> <area shape="rect" coords=249,12,255,21 href="javascript:theColor('#ffcc33')"> <area shape="rect" coords=257,12,263,21 href="javascript:theColor('#ffcc66')"> <area shape="rect" coords=265,12,271,21 href="javascript:theColor('#ffcc99')"> <area shape="rect" coords=273,12,279,21 href="javascript:theColor('#ffcccc')"> <area shape="rect" coords=281,12,287,21 href="javascript:theColor('#ffccff')"> <area shape="rect" coords=1,23,7,32 href="javascript:theColor('#009900')"> <area shape="rect" coords=9,23,15,32 href="javascript:theColor('#009933')"> <area shape="rect" coords=17,23,23,32 href="javascript:theColor('#009966')"> <area shape="rect" coords=25,23,31,32 href="javascript:theColor('#009999')"> <area shape="rect" coords=33,23,39,32 href="javascript:theColor('#0099cc')"> <area shape="rect" coords=41,23,47,32 href="javascript:theColor('#0099ff')"> <area shape="rect" coords=49,23,55,32 href="javascript:theColor('#339900')"> <area shape="rect" coords=57,23,63,32 href="javascript:theColor('#339933')"> <area shape="rect" coords=65,23,71,32 href="javascript:theColor('#339966')"> <area shape="rect" coords=73,23,79,32 href="javascript:theColor('#339999')"> <area shape="rect" coords=81,23,87,32 href="javascript:theColor('#3399cc')"> <area shape="rect" coords=89,23,95,32 href="javascript:theColor('#3399ff')"> <area shape="rect" coords=97,23,103,32 href="javascript:theColor('#669900')"> <area shape="rect" coords=105,23,111,32 href="javascript:theColor('#669933')"> <area shape="rect" coords=113,23,119,32 href="javascript:theColor('#669966')"> <area shape="rect" coords=121,23,127,32 href="javascript:theColor('#669999')"> <area shape="rect" coords=129,23,135,32 href="javascript:theColor('#6699cc')"> <area shape="rect" coords=137,23,143,32 href="javascript:theColor('#6699ff')"> <area shape="rect" coords=145,23,151,32 href="javascript:theColor('#999900')"> <area shape="rect" coords=153,23,159,32 href="javascript:theColor('#999933')"> <area shape="rect" coords=161,23,167,32 href="javascript:theColor('#999966')"> <area shape="rect" coords=169,23,175,32 href="javascript:theColor('#999999')"> <area shape="rect" coords=177,23,183,32 href="javascript:theColor('#9999cc')"> <area shape="rect" coords=185,23,191,32 href="javascript:theColor('#9999ff')"> <area shape="rect" coords=193,23,199,32 href="javascript:theColor('#cc9900')"> <area shape="rect" coords=201,23,207,32 href="javascript:theColor('#cc9933')"> <area shape="rect" coords=209,23,215,32 href="javascript:theColor('#cc9966')"> <area shape="rect" coords=217,23,223,32 href="javascript:theColor('#cc9999')"> <area shape="rect" coords=225,23,231,32 href="javascript:theColor('#cc99cc')"> <area shape="rect" coords=233,23,239,32 href="javascript:theColor('#cc99ff')"> <area shape="rect" coords=241,23,247,32 href="javascript:theColor('#ff9900')"> <area shape="rect" coords=249,23,255,32 href="javascript:theColor('#ff9933')"> <area shape="rect" coords=257,23,263,32 href="javascript:theColor('#ff9966')"> <area shape="rect" coords=265,23,271,32 href="javascript:theColor('#ff9999')"> <area shape="rect" coords=273,23,279,32 href="javascript:theColor('#ff99cc')"> <area shape="rect" coords=281,23,287,32 href="javascript:theColor('#ff99ff')"> <area shape="rect" coords=1,34,7,43 href="javascript:theColor('#006600')"> <area shape="rect" coords=9,34,15,43 href="javascript:theColor('#006633')"> <area shape="rect" coords=17,34,23,43 href="javascript:theColor('#006666')"> <area shape="rect" coords=25,34,31,43 href="javascript:theColor('#006699')"> <area shape="rect" coords=33,34,39,43 href="javascript:theColor('#0066cc')"><area shape="rect" coords=41,34,47,43 href="javascript:theColor('#0066ff')"> <area shape="rect" coords=49,34,55,43 href="javascript:theColor('#336600')"> <area shape="rect" coords=57,34,63,43 href="javascript:theColor('#336633')"> <area shape="rect" coords=65,34,71,43 href="javascript:theColor('#336666')"> <area shape="rect" coords=73,34,79,43 href="javascript:theColor('#336699')"> <area shape="rect" coords=81,34,87,43 href="javascript:theColor('#3366cc')"> <area shape="rect" coords=89,34,95,43 href="javascript:theColor('#3366ff')"> <area shape="rect" coords=97,34,103,43 href="javascript:theColor('#666600')"><area shape="rect" coords=105,34,111,43 href="javascript:theColor('#666633')"> <area shape="rect" coords=113,34,119,43 href="javascript:theColor('#666666')"> <area shape="rect" coords=121,34,127,43 href="javascript:theColor('#666699')"> <area shape="rect" coords=129,34,135,43 href="javascript:theColor('#6666cc')"> <area shape="rect" coords=137,34,143,43 href="javascript:theColor('#6666ff')"> <area shape="rect" coords=145,34,151,43 href="javascript:theColor('#996600')"> <area shape="rect" coords=153,34,159,43 href="javascript:theColor('#996633')"> <area shape="rect" coords=161,34,167,43 href="javascript:theColor('#996666')"> <area shape="rect" coords=169,34,175,43 href="javascript:theColor('#996699')"> <area shape="rect" coords=177,34,183,43 href="javascript:theColor('#9966cc')"> <area shape="rect" coords=185,34,191,43 href="javascript:theColor('#9966ff')"> <area shape="rect" coords=193,34,199,43 href="javascript:theColor('#cc6600')"> <area shape="rect" coords=201,34,207,43 href="javascript:theColor('#cc6633')"> <area shape="rect" coords=209,34,215,43 href="javascript:theColor('#cc6666')"> <area shape="rect" coords=217,34,223,43 href="javascript:theColor('#cc6699')"> <area shape="rect" coords=225,34,231,43 href="javascript:theColor('#cc66cc')"> <area shape="rect" coords=233,34,239,43 href="javascript:theColor('#cc66ff')"> <area shape="rect" coords=241,34,247,43 href="javascript:theColor('#ff6600')"> <area shape="rect" coords=249,34,255,43 href="javascript:theColor('#ff6633')"> <area shape="rect" coords=257,34,263,43 href="javascript:theColor('#ff6666')"> <area shape="rect" coords=265,34,271,43 href="javascript:theColor('#ff6699')"> <area shape="rect" coords=273,34,279,43 href="javascript:theColor('#ff66cc')"> <area shape="rect" coords=281,34,287,43 href="javascript:theColor('#ff66ff')"> <area shape="rect" coords=1,45,7,54 href="javascript:theColor('#003300')"> <area shape="rect" coords=9,45,15,54 href="javascript:theColor('#003333')"> <area shape="rect" coords=17,45,23,54 href="javascript:theColor('#003366')"> <area shape="rect" coords=25,45,31,54 href="javascript:theColor('#003399')"> <area shape="rect" coords=33,45,39,54 href="javascript:theColor('#0033cc')"> <area shape="rect" coords=41,45,47,54 href="javascript:theColor('#0033ff')"> <area shape="rect" coords=49,45,55,54 href="javascript:theColor('#333300')"> <area shape="rect" coords=57,45,63,54 href="javascript:theColor('#333333')"> <area shape="rect" coords=65,45,71,54 href="javascript:theColor('#333366')"> <area shape="rect" coords=73,45,79,54 href="javascript:theColor('#333399')"> <area shape="rect" coords=81,45,87,54 href="javascript:theColor('#3333cc')"> <area shape="rect" coords=89,45,95,54 href="javascript:theColor('#3333ff')"> <area shape="rect" coords=97,45,103,54 href="javascript:theColor('#663300')"> <area shape="rect" coords=105,45,111,54 href="javascript:theColor('#663333')"> <area shape="rect" coords=113,45,119,54 href="javascript:theColor('#663366')"> <area shape="rect" coords=121,45,127,54 href="javascript:theColor('#663399')"> <area shape="rect" coords=129,45,135,54 href="javascript:theColor('#6633cc')"> <area shape="rect" coords=137,45,143,54 href="javascript:theColor('#6633ff')"> <area shape="rect" coords=145,45,151,54 href="javascript:theColor('#993300')"> <area shape="rect" coords=153,45,159,54 href="javascript:theColor('#993333')"> <area shape="rect" coords=161,45,167,54 href="javascript:theColor('#993366')"> <area shape="rect" coords=169,45,175,54 href="javascript:theColor('#993399')"> <area shape="rect" coords=177,45,183,54 href="javascript:theColor('#9933cc')"> <area shape="rect" coords=185,45,191,54 href="javascript:theColor('#9933ff')"> <area shape="rect" coords=193,45,199,54 href="javascript:theColor('#cc3300')"> <area shape="rect" coords=201,45,207,54 href="javascript:theColor('#cc3333')"> <area shape="rect" coords=209,45,215,54 href="javascript:theColor('#cc3366')"> <area shape="rect" coords=217,45,223,54 href="javascript:theColor('#cc3399')"> <area shape="rect" coords=225,45,231,54 href="javascript:theColor('#cc33cc')"> <area shape="rect" coords=233,45,239,54 href="javascript:theColor('#cc33ff')"> <area shape="rect" coords=241,45,247,54 href="javascript:theColor('#ff3300')"> <area shape="rect" coords=249,45,255,54 href="javascript:theColor('#ff3333')"> <area shape="rect" coords=257,45,263,54 href="javascript:theColor('#ff3366')"> <area shape="rect" coords=265,45,271,54 href="javascript:theColor('#ff3399')"> <area shape="rect" coords=273,45,279,54 href="javascript:theColor('#ff33cc')"> <area shape="rect" coords=281,45,287,54 href="javascript:theColor('#ff33ff')"> <area shape="rect" coords=1,56,7,65 href="javascript:theColor('#000000')"> <area shape="rect" coords=9,56,15,65 href="javascript:theColor('#000033')"> <area shape="rect" coords=17,56,23,65 href="javascript:theColor('#000066')"> <area shape="rect" coords=25,56,31,65 href="javascript:theColor('#000099')"> <area shape="rect" coords=33,56,39,65 href="javascript:theColor('#0000cc')"> <area shape="rect" coords=41,56,47,65 href="javascript:theColor('#0000ff')"> <area shape="rect" coords=49,56,55,65 href="javascript:theColor('#330000')"> <area shape="rect" coords=57,56,63,65 href="javascript:theColor('#330033')"> <area shape="rect" coords=65,56,71,65 href="javascript:theColor('#330066')"> <area shape="rect" coords=73,56,79,65 href="javascript:theColor('#330099')"> <area shape="rect" coords=81,56,87,65 href="javascript:theColor('#3300cc')"> <area shape="rect" coords=89,56,95,65 href="javascript:theColor('#3300ff')"> <area shape="rect" coords=97,56,103,65 href="javascript:theColor('#660000')"> <area shape="rect" coords=105,56,111,65 href="javascript:theColor('#660033')"> <area shape="rect" coords=113,56,119,65 href="javascript:theColor('#660066')"> <area shape="rect" coords=121,56,127,65 href="javascript:theColor('#660099')"> <area shape="rect" coords=129,56,135,65 href="javascript:theColor('#6600cc')"> <area shape="rect" coords=137,56,143,65 href="javascript:theColor('#6600ff')"> <area shape="rect" coords=145,56,151,65 href="javascript:theColor('#990000')"> <area shape="rect" coords=153,56,159,65 href="javascript:theColor('#990033')"> <area shape="rect" coords=161,56,167,65 href="javascript:theColor('#990066')"> <area shape="rect" coords=169,56,175,65 href="javascript:theColor('#990099')"> <area shape="rect" coords=177,56,183,65 href="javascript:theColor('#9900cc')"> <area shape="rect" coords=185,56,191,65 href="javascript:theColor('#9900ff')"> <area shape="rect" coords=193,56,199,65 href="javascript:theColor('#cc0000')"> <area shape="rect" coords=201,56,207,65 href="javascript:theColor('#cc0033')"> <area shape="rect" coords=209,56,215,65 href="javascript:theColor('#cc0066')"> <area shape="rect" coords=217,56,223,65 href="javascript:theColor('#cc0099')"> <area shape="rect" coords=225,56,231,65 href="javascript:theColor('#cc00cc')"> <area shape="rect" coords=233,56,239,65 href="javascript:theColor('#cc00ff')"> <area shape="rect" coords=241,56,247,65 href="javascript:theColor('#ff0000')"> <area shape="rect" coords=249,56,255,65 href="javascript:theColor('#ff0033')"> <area shape="rect" coords=257,56,263,65 href="javascript:theColor('#ff0066')"> <area shape="rect" coords=265,56,271,65 href="javascript:theColor('#ff0099')"> <area shape="rect" coords=273,56,279,65 href="javascript:theColor('#ff00cc')"> <area shape="rect" coords=281,56,287,65 href="javascript:theColor('#ff00ff')"></map><form name="menu"> <table border="0" bgcolor="#cccccc" width="300" cellspacing="0" cellpadding="3"> <tr> <td colspan="2" bgcolor="#000080"> <font face="ms sans serif, arial, helvetica, sans-serif" size="1" color="#ffffff"><b>Colour Sampler<b/></font> </td> </tr> <tr> <td colspan="2" align="center"> <img height="67" src="palette.gif" width="289" useMap="#spmap" border="0"> </td> </tr> <tr> <td width="150"> <font face="verdana, arial, helvetica, sans-serif" size="1"><b> Background Colour: <input type="radio" name="colorer" checked><br /> Text Colour: <input type="radio" name="colorer"></b></font> </td> <td> <input type="text" size="10" name="color1" value="#ffffff" style="font-size: 9pt" /><br /> <input type="text" size="10" name="color2" value="#000000" style="font-size: 9pt" /> </td> </tr> <tr> <td colspan="2"> <font face="verdana, arial, helvetica, sans-serif" size="1"><b>Text:<b/></font> </td> </tr> <tr> <td colspan="2" align="center"> <textarea name="texter" rows="7" cols="33" wrap="virtual">This is a Sample Text. It will help you judge whether your colour combinations are legible!In order to change the colours choose either the "Background Colour" or "Text Colour" radio buttons and click the colour you want on the palette.</textarea> </td> </tr> <tr> <td> <font face="verdana, arial, helvetica, sans-serif" size="1"><b> Font:</b> Name</font> </td> <td> <font face="verdana, arial, helvetica, sans-serif" size="1">Size</font> </td> </tr> <tr> <td> <input type="text" name="fonter" size="10" value="verdana" onFocus="select();" style="font-size: 9pt" /> </td> <td> <select name="sizer" style="font-size: 9pt"> <option value="0" selected>1 </option> <option value="1">2</option> <option value="2">3</option> <option value="3">4</option> <option value="4">5</option> <option value="5">6</option> <option value="6">7</option> </select> </td> </tr> <tr> <td colspan="2"> <font face="verdana, arial, helvetica, sans-serif" size="1">Italics <font face="verdana, arial, helvetica, sans-serif" size="1">Bold <font face="verdana, arial, helvetica, sans-serif" size="1">Underline</font> </td> </tr> <tr> <td colspan="2"> <input type="checkbox" name="italics" value="ON"> <input type="checkbox" name="bold" value="ON"> <input type="checkbox" name="underline" value="ON"> </td> </tr> <tr> <td colspan="2" align="right"> <input type="button" name="button" onClick="sampleIt();" value="Show Sample" style="font-size: 9pt; font-weight: bold" /> </td> </tr></table></form><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->http://javascriptbank.com/javascript/utility/palette.gif