Home » Webmaster Tools and Resources » Software & Scripts » JavaScript » Background Effects » Change Color
Change Color, Background Effects Code

This JavaScript will present the website visitor with a list of available background colors which can be changed by selecting desired color from the drop down menu
Sample:
Demo
Insert this code before </head>

Insert this code before </body>

<center>
<form>
<input type="text" name="color" size=18>
<select name=pco onChange="document.bgColor=(this.form.pco.value)">
<option value=aliceblue>aliceblue</option>
<option value=antiquewhite>antiquewhite</option>
<option value=aqua>aqua</option>
<option value=aquamarine>aquamarine</option>
<option value=azure>azure</option>
<option value=beige>beige</option>
<option value=bisque>bisque</option>
<option value=black>black</option>
<option value=blanchedalmond>blanchedalmond</option>
<option value=blue>blue</option>
<option value=blueviolet>blueviolet</option>
<option value=brown>brown</option>
<option value=burlywood>burlywood</option>
<option value=cadetblue>cadetblue</option>
<option value=chartreuse>chartreuse</option>
<option value=chocolate>chocolate</option>
<option value=coral>coral</option>
<option value=cornflowerblue>cornflowerblue</option>
<option value=cornsilk>cornsilk</option>
<option value=crimson>crimson</option>
<option value=cyan>cyan</option>
<option value=darkblue>darkblue</option>
<option value=darkcyan>darkcyan</option>
<option value=darkgoldenrod>darkgoldenrod</option>
<option value=darkgray>darkgray</option>
<option value=darkgreen>darkgreen</option>
<option value=darkkhaki>darkkhaki</option>
<option value=darkmagenta>darkmagenta</option>
<option value=darkolivegreen>darkolivegreen</option>
<option value=darkorange>darkorange</option>
<option value=darkorchid>darkorchid</option>
<option value=darkred>darkred</option>
<option value=darksalmon>darksalmon</option>
<option value=darkseagreen>darkseagreen</option>
<option value=darkslateblue>darkslateblue</option>
<option value=darkslategray>darkslategray</option>
<option value=darkturquoise>darkturquoise</option>
<option value=darkviolet>darkviolet</option>
<option value=deeppink>deeppink</option>
<option value=deepskyblue>deepskyblue</option>
<option value=dimgray>dimgray</option>
<option value=dodgerblue>dodgerblue</option>
<option value=firebrick>firebrick</option>
<option value=floralwhite>floralwhite</option>
<option value=forestgreen>forestgreen</option>
<option value=fuchsia>fuchsia</option>
<option value=gainsboro>gainsboro</option>
<option value=ghostwhite>ghostwhite</option>
<option value=gold>gold</option>
<option value=goldenrod>goldenrod</option>
<option value=gray>gray</option>
<option value=green>green</option>
<option value=greenyellow>greenyellow</option>
<option value=honeydew>honeydew</option>
<option value=hotpink>hotpink</option>
<option value=indianred>indianred</option>
<option value=indigo>indigo</option>
<option value=ivory>ivory</option>
<option value=khaki>khaki</option>
<option value=lavender>lavender</option>
<option value=lavenderblush>lavenderblush</option>
<option value=lawngreen>lawngreen</option>
<option value=lemonchiffon>lemonchiffon</option>
<option value=lightblue>lightblue</option>
<option value=lightcoral>lightcoral</option>
<option value=lightcyan>lightcyan</option>
<option value=lightgoldenrodyellow>lightgoldenrodyellow</option>
<option value=lightgreen>lightgreen</option>
<option value=lightgrey>lightgrey</option>
<option value=lightpink>lightpink</option>
<option value=lightsalmon>lightsalmon</option>
<option value=lightseagreen>lightseagreen</option>
<option value=lightskyblue>lightskyblue</option>
<option value=lightslategray>lightslategray</option>
<option value=lightsteelblue>lightsteelblue</option>
<option value=lightyellow>lightyellow</option>
<option value=lime>lime</option>
<option value=limegreen>limegreen</option>
<option value=linen>linen</option>
<option value=magenta>magenta</option>
<option value=maroon>maroon</option>
<option value=mediumaquamarine>mediumaquamarine</option>
<option value=mediumblue>mediumblue</option>
<option value=mediumorchid>mediumorchid</option>
<option value=mediumpurple>mediumpurple</option>
<option value=mediumseagreen>mediumseagreen</option>
<option value=mediumslateblue>mediumslateblue</option>
<option value=mediumspringgreen>mediumspringgreen</option>
<option value=mediumturquoise>mediumturquoise</option>
<option value=mediumvioletred>mediumvioletred</option>
<option value=midnightblue>midnightblue</option>
<option value=mintcream>mintcream</option>
<option value=mistyrose>mistyrose</option>
<option value=moccasin>moccasin</option>
<option value=navajowhite>navajowhite</option>
<option value=navy>navy</option>
<option value=oldlace>oldlace</option>
<option value=olive>olive</option>
<option value=olivedrab>olivedrab</option>
<option value=orange>orange</option>
<option value=orangered>orangered</option>
<option value=orchid>orchid</option>
<option value=palegoldenrod>palegoldenrod</option>
<option value=palegreen>palegreen</option>
<option value=paleturquoise>paleturquoise</option>
<option value=palevioletred>palevioletred</option>
<option value=papayawhip>papayawhip</option>
<option value=peachpuff>peachpuff</option>
<option value=peru>peru</option>
<option value=pink>pink</option>
<option value=plum>plum</option>
<option value=powderblue>powderblue</option>
<option value=purple>purple</option>
<option value=red>red</option>
<option value=rosybrown>rosybrown</option>
<option value=royalblue>royalblue</option>
<option value=saddlebrown>saddlebrown</option>
<option value=salmon>salmon</option>
<option value=sandybrown>sandybrown</option>
<option value=seagreen>seagreen</option>
<option value=seashell>seashell</option>
<option value=sienna>sienna</option>
<option value=silver>silver</option>
<option value=skyblue>skyblue</option>
<option value=slateblue>slateblue</option>
<option value=slategray>slategray</option>
<option value=snow>snow</option>
<option value=springgreen>springgreen</option>
<option value=steelblue>steelblue</option>
<option value=tan>tan</option>
<option value=teal>teal</option>
<option value=thistle>thistle</option>
<option value=tomato>tomato</option>
<option value=turquoise>turquoise</option>
<option value=violet>violet</option>
<option value=wheat>wheat</option>
<option value=white>white</option>
<option value=whitesmoke>whitesmoke</option>
<option value=yellow>yellow</option>
<option value=yellowgreen>yellowgreen</option>
</select>
<input type="button" value="Colour" onclick="document.bgColor=(this.form.color.value)">
<input type="reset" name="cancel" value="Reset">
</form></center>
<center><table border=2 cellpadding=5 cellspacing=3 width="90%">
<tr><td>
<font size="-1" color=navy>
 aliceblue<br>
 antiquewhite<br>
 aqua<br>
 aquamarine<br>
 azure<br>
 beige<br>
 bisque<br>
 black<br>
 blanchedalmond<br>
 blue<br>
 blueviolet<br>
 brown<br>
 burlywood<br>
 cadetblue<br>
 chartreuse<br>
 chocolate<br>
 coral<br>
 cornflowerblue<br>
 cornsilk<br>
 crimson<br>
 cyan<br>
 darkblue<br>
 darkcyan<br>
 darkgoldenrod<br>
 darkgray<br>
 darkgreen<br>
 darkkhaki<br>
 darkmagenta<br>
 darkolivegreen<br>
 darkorange<br>
 darkorchid<br>
 darkred<br>
 darksalmon<br>
 darkseagreen<br>
 darkslateblue<br>
 darkslategray<br>
 darkturquoise<br>
 darkviolet<br>
 deeppink<br>
 deepskyblue<br>
 dimgray<br>
 dodgerblue<br>
 firebrick<br>
 floralwhite<br>
 forestgreen<br>
 fuchsia<br>
</font>
</td>
<td>
<font size="-1" color=navy>
 gainsboro<br>
 ghostwhite<br>
 gold<br>
 goldenrod<br>
 gray<br>
 green<br>
 greenyellow<br>
 honeydew<br>
 hotpink<br>
 indianred<br>
 indigo<br>
 ivory<br>
 khaki<br>
 lavender<br>
 lavenderblush<br>
 lawngreen<br>
 lemonchiffon<br>
 lightblue<br>
 lightcoral<br>
 lightcyan<br>
 lightgoldenrodyellow<br>
 lightgreen<br>
 lightgrey<br>
 lightpink<br>
 lightsalmon<br>
 lightseagreen<br>
 lightskyblue<br>
 lightslategray<br>
 lightsteelblue<br>
 lightyellow<br>
 lime<br>
 limegreen<br>
 linen<br>
 magenta<br>
 maroon<br>
 mediumaquamarine<br>
 mediumblue<br>
 mediumorchid<br>
 mediumpurple<br>
 mediumseagreen<br>
 mediumslateblue<br>
 mediumspringgreen<br>
 mediumturquoise<br>
 mediumvioletred<br>
 midnightblue<br>
 mintcream<br>
 mistyrose<br>
 </font>
</td>
<td>
<font size="-1" color=navy>
moccasin<br>
 navajowhite<br>
 navy<br>
 oldlace<br>
 olive<br>
 olivedrab<br>
 orange<br>
 orangered<br>
 orchid<br>
 palegoldenrod<br>
 palegreen<br>
 paleturquoise<br>
 palevioletred<br>
 papayawhip<br>
 peachpuff<br>
 peru<br>
 pink<br>
 plum<br>
 powderblue<br>
 purple<br>
 red<br>
 rosybrown<br>
 royalblue<br>
 saddlebrown<br>
 salmon<br>
 sandybrown<br>
 seagreen<br>
 seashell<br>
 sienna<br>
 silver<br>
 skyblue<br>
 slateblue<br>
 slategray<br>
 snow<br>
 springgreen<br>
 steelblue<br>
 tan<br>
 teal<br>
 thistle<br>
 tomato<br>
 turquoise<br>
 violet<br>
 wheat<br>
 white<br>
 whitesmoke<br>
 yellow<br>
 yellowgreen<br>
</font>
</td></tr></table></center>
Related Resources: