The JavaScript Source: Miscellaneous: Compare Colors

Home

Miscellaneous

Compare Colors

This script is excellent for testing page background and font colors together. It provides the hexadecimal numbers for the colors too.

This is where the hex code for the background color shows.

This is where the hex code for the font color shows.

The JavaScript Source: Miscellaneous: Compare Colors
Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

  <BODY> <table border="0" cellspacing="1" cellpadding="1" width="500" align="center"> <tr><td align="center"> <form action="selectbg"> <select onchange="document.bgColor=this[this.selectedIndex].value; document.getElementById('bgspan').innerHTML='This is the background color hex code: '+this[this.selectedIndex].value;"> <option value="">Select Background</option> <option value="#F0F8FF">aliceblue</option> <option value="#FAEBD7">antiquewhite</option> <option value="#00FFFF">aqua</option> <option value="#7FFFD4">aquamarine</option> <option value="#F0FFFF">azure</option> <option value="#F5F5DC">beige</option> <option value="#FFE4C4">bisque</option> <option value="#000000">black</option> <option value="#FFEBCD">blanchedalmond</option> <option value="#0000FF">blue</option> <option value="#8A2BE2">blueviolet</option> <option value="#A52A2A">brown</option> <option value="#DEB887">burlywood</option> <option value="#5F9EA0">cadetblue</option> <option value="#7FFF00">chartreuse</option> <option value="#D2691E">chocolate</option> <option value="#FF7F50">coral</option> <option value="#6495ED">cornflowerblue</option> <option value="#FFF8DC">cornsilk</option> <option value="#DC143C">crimson</option> <option value="#00FFFF">cyan</option> <option value="#00008B">darkblue</option> <option value="#008B8B">darkcyan</option> <option value="#B8860B">darkgoldenrod</option> <option value="#A9A9A9">darkgray</option> <option value="#006400">darkgreen</option> <option value="#BDB76B">darkkhaki</option> <option value="#8B008B">darkmagenta</option> <option value="#556B2F">darkolivegreen</option> <option value="#FF8C00">darkorange</option> <option value="#9932CC">darkorchid</option> <option value="#8B0000">darkred</option> <option value="#E9967A">darksalmon</option> <option value="#8FBC8F">darkseagreen</option> <option value="#483D8B">darkslateblue</option> <option value="#2F4F4F">darkslategray</option> <option value="#00CED1">darkturquoise</option> <option value="#9400D3">darkviolet</option> <option value="#FF1493">deeppink</option> <option value="#00BFFF">deepskyblue</option> <option value="#696969">dimgray</option> <option value="#1E90FF">dodgerblue</option> <option value="#B22222">firebrick</option> <option value="#FFFAF0">floralwhite</option> <option value="#228B22">forestgreen</option> <option value="#FF00FF">fuchsia</option> <option value="#DCDCDC">gainsboro</option> <option value="#F8F8FF">ghostwhite</option> <option value="#FFD700">gold</option> <option value="#DAA520">goldenrod</option> <option value="#BEBEBE">gray</option> <option value="#008000">green</option> <option value="#ADFF2F">greenyellow</option> <option value="#F0FFF0">honeydew</option> <option value="#FF69B4">hotpink</option> <option value="#CD5C5C">indianred</option> <option value="#4B0082">indigo</option> <option value="#FFFFF0">ivory</option> <option value="#F0D58C">khaki</option> <option value="#E6E6FA">lavender</option> <option value="#FFF0F5">lavenderblush</option> <option value="#7CFC00">lawngreen</option> <option value="#FFFACD">lemonchiffon</option> <option value="#ADD8E6">lightblue</option> <option value="#F08080">lightcoral</option> <option value="#E0FFFF">lightcyan</option> <option value="#FAFAD2">lightgoldenrodyellow</option> <option value="#90EE90">lightgreen</option> <option value="#D3D3D3">lightgrey</option> <option value="#FFB6C1">lightpink</option> <option value="#FFA07A">lightsalmon</option> <option value="#20B2AA">lightseagreen</option> <option value="#87CEFA">lightskyblue</option> <option value="#778899">lightslategray</option> <option value="#B0C4DE">lightsteelblue</option> <option value="#FFFFE0">lightyellow</option> <option value="#00FF00">lime</option> <option value="#32CD32">limegreen</option> <option value="#FAF0E6">linen</option> <option value="#FF00FF">magenta</option> <option value="#800000">maroon</option> <option value="#66CDAA">mediumaquamarine</option> <option value="#0000CD">mediumblue</option> <option value="#BA55D3">mediumorchid</option> <option value="#9370DB">mediumpurple</option> <option value="#3CB371">mediumseagreen</option> <option value="#7B68EE">mediumslateblue</option> <option value="#00FA9A">mediumspringgreen</option> <option value="#48D1CC">mediumturquoise</option> <option value="#C71585">mediumvioletred</option> <option value="#191970">midnightblue</option> <option value="#F5FFFA">mintcream</option> <option value="#FF44E1">mistyrose</option> <option value="#FFE48B">moccasin</option> <option value="#FFDEAD">navajowhite</option> <option value="#000080">navy</option> <option value="#FDF5E6">oldlace</option> <option value="#808000">olive</option> <option value="#6B8E23">olivedrab</option> <option value="#FFA500">orange</option> <option value="#FF4500">orangered</option> <option value="#DA70D6">orchid</option> <option value="#EEE8AA">palegoldenrod</option> <option value="#98FB98">palegreen</option> <option value="#AFEEEE">paleturquoise</option> <option value="#DB7093">palevioletred</option> <option value="#FFEFD5">papayawhip</option> <option value="#FFDAB9">peachpuff</option> <option value="#CD853F">peru</option> <option value="#FFC0CB">pink</option> <option value="#DDA0DD">plum</option> <option value="#B0E0E6">powderblue</option> <option value="#800080">purple</option> <option value="#FF0000">red</option> <option value="#BC8F8F">rosybrown</option> <option value="#4169E1">royalblue</option> <option value="#8B4513">saddlebrown</option> <option value="#FA8072">salmon</option> <option value="#F4A460">sandybrown</option> <option value="#2E8B57">seagreen</option> <option value="#FFF5EE">seashell</option> <option value="#A0522D">sienna</option> <option value="#C0C0C0">silver</option> <option value="#87CEEB">skyblue</option> <option value="#6A5ACD">slateblue</option> <option value="#708090">slategray</option> <option value="#FFFAFA">snow</option> <option value="#00FF7F">springgreen</option> <option value="#4682B4">steelblue</option> <option value="#D2B48C">tan</option> <option value="#008080">teal</option> <option value="#D8BFD8">thistle</option> <option value="#FF6347">tomato</option> <option value="#40E0D0">turquoise</option> <option value="#EE82EE">violet</option> <option value="#F5DEB3">wheat</option> <option value="#FFFFFF">white</option> <option value="#F5F5F5">whitesmoke</option> <option value="#FFFF00">yellow</option> <option value="#9ACD32">yellowgreen</option> </select> <br /><br /> <span id="bgspan">This is where the hex code for the background color shows.</span> </td> <td align="center"> <form action="selectfg"> <select onchange="document.fgColor=this[this.selectedIndex].value; document.getElementById('fgspan').innerHTML='This is the font color hex code: '+this[this.selectedIndex].value;"> <option value="">Select Text</option> <option value="#F0F8FF">aliceblue</option> <option value="#FAEBD7">antiquewhite</option> <option value="#00FFFF">aqua</option> <option value="#7FFFD4">aquamarine</option> <option value="#F0FFFF">azure</option> <option value="#F5F5DC">beige</option> <option value="#FFE4C4">bisque</option> <option value="#000000">black</option> <option value="#FFEBCD">blanchedalmond</option> <option value="#0000FF">blue</option> <option value="#8A2BE2">blueviolet</option> <option value="#A52A2A">brown</option> <option value="#DEB887">burlywood</option> <option value="#5F9EA0">cadetblue</option> <option value="#7FFF00">chartreuse</option> <option value="#D2691E">chocolate</option> <option value="#FF7F50">coral</option> <option value="#6495ED">cornflowerblue</option> <option value="#FFF8DC">cornsilk</option> <option value="#DC143C">crimson</option> <option value="#00FFFF">cyan</option> <option value="#00008B">darkblue</option> <option value="#008B8B">darkcyan</option> <option value="#B8860B">darkgoldenrod</option> <option value="#A9A9A9">darkgray</option> <option value="#006400">darkgreen</option> <option value="#BDB76B">darkkhaki</option> <option value="#8B008B">darkmagenta</option> <option value="#556B2F">darkolivegreen</option> <option value="#FF8C00">darkorange</option> <option value="#9932CC">darkorchid</option> <option value="#8B0000">darkred</option> <option value="#E9967A">darksalmon</option> <option value="#8FBC8F">darkseagreen</option> <option value="#483D8B">darkslateblue</option> <option value="#2F4F4F">darkslategray</option> <option value="#00CED1">darkturquoise</option> <option value="#9400D3">darkviolet</option> <option value="#FF1493">deeppink</option> <option value="#00BFFF">deepskyblue</option> <option value="#696969">dimgray</option> <option value="#1E90FF">dodgerblue</option> <option value="#B22222">firebrick</option> <option value="#FFFAF0">floralwhite</option> <option value="#228B22">forestgreen</option> <option value="#FF00FF">fuchsia</option> <option value="#DCDCDC">gainsboro</option> <option value="#F8F8FF">ghostwhite</option> <option value="#FFD700">gold</option> <option value="#DAA520">goldenrod</option> <option value="#BEBEBE">gray</option> <option value="#008000">green</option> <option value="#ADFF2F">greenyellow</option> <option value="#F0FFF0">honeydew</option> <option value="#FF69B4">hotpink</option> <option value="#CD5C5C">indianred</option> <option value="#4B0082">indigo</option> <option value="#FFFFF0">ivory</option> <option value="#F0D58C">khaki</option> <option value="#E6E6FA">lavender</option> <option value="#FFF0F5">lavenderblush</option> <option value="#7CFC00">lawngreen</option> <option value="#FFFACD">lemonchiffon</option> <option value="#ADD8E6">lightblue</option> <option value="#F08080">lightcoral</option> <option value="#E0FFFF">lightcyan</option> <option value="#FAFAD2">lightgoldenrodyellow</option> <option value="#90EE90">lightgreen</option> <option value="#D3D3D3">lightgrey</option> <option value="#FFB6C1">lightpink</option> <option value="#FFA07A">lightsalmon</option> <option value="#20B2AA">lightseagreen</option> <option value="#87CEFA">lightskyblue</option> <option value="#778899">lightslategray</option> <option value="#B0C4DE">lightsteelblue</option> <option value="#FFFFE0">lightyellow</option> <option value="#00FF00">lime</option> <option value="#32CD32">limegreen</option> <option value="#FAF0E6">linen</option> <option value="#FF00FF">magenta</option> <option value="#800000">maroon</option> <option value="#66CDAA">mediumaquamarine</option> <option value="#0000CD">mediumblue</option> <option value="#BA55D3">mediumorchid</option> <option value="#9370DB">mediumpurple</option> <option value="#3CB371">mediumseagreen</option> <option value="#7B68EE">mediumslateblue</option> <option value="#00FA9A">mediumspringgreen</option> <option value="#48D1CC">mediumturquoise</option> <option value="#C71585">mediumvioletred</option> <option value="#191970">midnightblue</option> <option value="#F5FFFA">mintcream</option> <option value="#FF44E1">mistyrose</option> <option value="#FFE48B">moccasin</option> <option value="#FFDEAD">navajowhite</option> <option value="#000080">navy</option> <option value="#FDF5E6">oldlace</option> <option value="#808000">olive</option> <option value="#6B8E23">olivedrab</option> <option value="#FFA500">orange</option> <option value="#FF4500">orangered</option> <option value="#DA70D6">orchid</option> <option value="#EEE8AA">palegoldenrod</option> <option value="#98FB98">palegreen</option> <option value="#AFEEEE">paleturquoise</option> <option value="#DB7093">palevioletred</option> <option value="#FFEFD5">papayawhip</option> <option value="#FFDAB9">peachpuff</option> <option value="#CD853F">peru</option> <option value="#FFC0CB">pink</option> <option value="#DDA0DD">plum</option> <option value="#B0E0E6">powderblue</option> <option value="#800080">purple</option> <option value="#FF0000">red</option> <option value="#BC8F8F">rosybrown</option> <option value="#4169E1">royalblue</option> <option value="#8B4513">saddlebrown</option> <option value="#FA8072">salmon</option> <option value="#F4A460">sandybrown</option> <option value="#2E8B57">seagreen</option> <option value="#FFF5EE">seashell</option> <option value="#A0522D">sienna</option> <option value="#C0C0C0">silver</option> <option value="#87CEEB">skyblue</option> <option value="#6A5ACD">slateblue</option> <option value="#708090">slategray</option> <option value="#FFFAFA">snow</option> <option value="#00FF7F">springgreen</option> <option value="#4682B4">steelblue</option> <option value="#D2B48C">tan</option> <option value="#008080">teal</option> <option value="#D8BFD8">thistle</option> <option value="#FF6347">tomato</option> <option value="#40E0D0">turquoise</option> <option value="#EE82EE">violet</option> <option value="#F5DEB3">wheat</option> <option value="#FFFFFF">white</option> <option value="#F5F5F5">whitesmoke</option> <option value="#FFFF00">yellow</option> <option value="#9ACD32">yellowgreen</option> </select> <br><br> <span id="fgspan">This is where the hex code for the font color shows.</span> </form> </td></tr> </table> <p><center> <font face="arial, helvetica" size"-2">Free JavaScripts provided<br> by <a href="http://javascriptsource.com">The JavaScript Source</a></font> </center><p> 
Did you use this script? Do you like this site? Please link to us!

Sign up for the JavaScript Weekly

internet.com Privacy Policy

[ Contact Us! ]
[ JavaScript Forum ]
[ Submit Your Script! ]

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Whitepapers and eBooks
Microsoft Article: Will Hyper-V Make VMware This Decade's Netscape? Microsoft Article: BitLocker Encryption on Windows Server 2008 Go Parallel Article: Intel Thread Checker, Meet 20 Million LOC IBM Whitepaper: Innovative Collaboration to Advance Your Business Internet.com eBook: Real Life Rails Avaya Article: Call Control XML - Powerful, Standards-Based Call Control Tripwire Whitepaper: Seven Practical Steps to Mitigate Virtualization Security Risks Internet.com eBook: The Pros and Cons of Outsourcing Internet.com eBook: Best Practices for Developing a Web Site		IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future" Avaya Article: Call Control XML in Action - A CCXML Auto Attendant Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008 Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers Go Parallel Article: Getting Started with TBB on Windows HP eBook: Storage Networking , Part 1 MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts
Go Parallel Video: Intel(R) Threading Building Blocks: A New Method for Threading in C++ HP Video: Is Your Data Center Ready for a Real World Disaster? Microsoft Partner Portal Video: Microsoft Gold Certified Partners Build Successful Practices HP On Demand Webcast: Virtualization in Action Go Parallel Video: Performance and Threading Tools for Game Developers		Rackspace Hosting Center: Customer Videos Intel vPro Developer Virtual Bootcamp HP Disaster-Proof Solutions eSeminar HP On Demand Webcast: Discover the Benefits of Virtualization MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits
Microsoft Download: Silverlight 2 Software Development Kit Beta 2 30-Day Trial: SPAMfighter Exchange Module Red Gate Download: SQL Toolbelt		Iron Speed Designer Application Generator Microsoft Download: Silverlight 2 Beta 2 Runtime MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos
IBM IT Innovation Article: Green Servers Provide a Competitive Advantage Microsoft Article: Expression Web 2 for PHP Developers--Simplify Your PHP Applications		MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES