Phiên bản đầy đủ: jsB@nk » Ứng dụng » Chọn màu cho chữ và nền
URL: https://www.javascriptbank.com/colour-sampler.html
Hiệu ứng cho phép bạn dễ dàng biết được mã hexadecimal của một màu thông dụng nào đó. Công việc của bạn chỉ là nhấp chọn màu muốn xem và hiệu ứng hiển thị mã màu ngay lập tức. Đây là một công cụ khá hữu ích và tiết kiệm thời gian dành cho những người thiết kế web.
Phiên bản đầy đủ: jsB@nk » Ứng dụng » Chọn màu cho chữ và nền
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