Change background color in visualforce page.

Now we create a color picker in visualforce page.Which is help to change the background color of visualforce page.

<apex:page showHeader="false">

  <script>
      function changeColor(inputID){
              var inputValue = document.getElementById(inputID).value;
              return ( document.body.style.backgroundColor =[document.getElementById(inputID).value]);
      }
      function focus(){
              j$("[id$=loading-curtain-div]").css("background-color", "blue").css("opacity", 0.35);
      }
  </script>

      <style>
             .ash_gray{ background-color:#666362; color:white;  }
      </style>

     <apex:sectionHeader title="Color codes" subtitle="Pick Color">
         </apex:sectionHeader>      
       
           <apex:pageBlock >
               <apex:form id="myform" >
                  <div id="loading-curtain-div"/>
                     <apex:pageBlockSection columns="2" id="mypageblockSection">
                         <apex:outputText value="Ash Gray:" style="font-size:15px;"/>
                              <apex:commandButton id="cmd1" onclick="changeColor('{!$Component.cmd1}')" onmouseout="focus();"  reRender="myform" value="#666362" style="background:#666362;width:80px" />
                         <apex:outputText value="Slate Bliue:" style="font-size:15px;"/>
                              <apex:commandButton id="cmd2" onclick="changeColor('{!$Component.cmd2}')" reRender="myform" value="#737CA1" style="background:#737CA1;width:80px" />
                         <apex:outputText value="Blue Jay:" style="font-size:15px;"/>
                              <apex:commandButton id="cmd3" onclick="changeColor('{!$Component.cmd3}')" reRender="myform" value="#2B547E" style="background:#2B547E;width:80px"/>
                         <apex:outputText value="Blue Hosta:" style="font-size:15px"/>
                              <apex:commandButton id="cmd4" onclick="changeColor('{!$Component.cmd4}')" reRender="myform" value="#77BFC7" style="background:#77BFC7;width:80px"/>      
                         <apex:outputText value="Light Sea Green:" style="font-size:15px "/>
                              <apex:commandButton id="cmd5" onclick="changeColor('{!$Component.cmd5}')" reRender="myform" value="#3EA99F" style="background:#3EA99F; width:80px"/>
                         <apex:outputText value="Dark Turquoise:" style="font-size:15px"/>
                              <apex:commandButton id="cmd6" onclick="changeColor('{!$Component.cmd6}')" reRender="myform" value="#3B9C9C" style="background:#3B9C9C;width:80px"/>
                         <apex:outputText value="Sea Turtle Green:" style="font-size:15px"/>
                              <apex:commandButton id="cmd7" onclick="changeColor('{!$Component.cmd7}')" reRender="myform" value="#438D80" style="background:#438D80;width:80px"/>
                         <apex:outputText value="Coffee:" style="font-size:15px;"/>
                              <apex:commandButton id="cmd8" onclick="changeColor('{!$Component.cmd8}')" reRender="myform" value="#827B60" style="background:#827B60;width:80px"/>
                         <apex:outputText value="Plum Purple:" style="font-size:15px"/>
                              <apex:commandButton id="cmd9" onclick="changeColor('{!$Component.cmd9}')" reRender="myform" value="#6F4E37" style="background:#6F4E37;width:80px"/>
                         <apex:outputText value="Plum Velvet:" style="font-size:15px"/>
                              <apex:commandButton id="cmd10" onclick="changeColor('{!$Component.cmd10}')" reRender="myform" value="#7D0552" style="background:#7D0552;width:80px"/>
                         <apex:outputText value="Army Brown:" style="font-size:15px"/>
                               <apex:commandButton id="cmd11" onclick="changeColor('{!$Component.cmd11}')" reRender="myform" value="#5E5A80" style="background:#5E5A80;width:80px"/>
                         <apex:outputText value="Plum Purple:" style="font-size:15px"/>
                               <apex:commandButton id="cmd12" onclick="changeColor('{!$Component.cmd12}')" reRender="myform" value="#583759" style="background:#583759;width:80px"/>
             </apex:pageBlockSection>
         </apex:form>
    </apex:pageBlock>
 
</apex:page>