Version complète: jsB@nk » Utilitaire » Couleur Sampler
URL: https://www.javascriptbank.com/colour-sampler.html
Il s'agit d'un script utile pour tester la lisibilité de certaines combinaisons de couleurs tandis que la conception de pages Web. Cet JavaScript permet aux utilisateurs de sélectionner un arrière-plan la couleur de la page Web et de placer du texte dans différentes couleurs, tailles et combinaisons de caractères sur le dessus de celui-ci leur permettant ainsi de vérifier la couleur de différents régimes. Il s'agit d'un temps outil pour les concepteurs de sites Web.
Version complète: jsB@nk » Utilitaire » Couleur 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