It's cool: Looks like Microsoft Windows/Office Color Picker
It's simple: Only 1 HTML file ( No additional js,css or images )
Easy to use: Just add a javascript onclick event to get to work
Features:

1. Transfer selected color
2. DoubleClick to select color
3. Any number of form fields can use the picker to pick up a color value
4. It's FREE! Released under LGPL license.

How to use:

1. Download HBcms Color Picker file ( hbcms_color_picker_en.html )
   Move the file to your web directory, eg. /script/hbcms_color_picker_en.html
    
   
2. Add a javascript function getMyColor to your page which include a color picker requirement: <script> function getMyColor(t) { var hbcms_color_picker_path = "/script/hbcms_color_picker_en.html"; var old_color = ( t.value.indexOf('#') == 0 ) ? '?'+t.value.substr(1) : '?' + t.value; if ( document.all) { var color = showModalDialog(hbcms_color_picker_path+old_color, "", "dialogWidth:18.5em; dialogHeight:16.0em; status:0"); if (color != null ) { t.value = color; t.style.color = color; } else { t.focus(); } } else { var color = window.open(hbcms_color_picker_path+ '?'+t.id, "hbcmsPop", "top=200,left=200,scrollbars=no,dialog=yes,modal=yes,width=300,height=260,resizable=no,aaa=rt4"); } return true; } </script>
   Note: In function getMyColor, Your must set the right hbcms_color_picker_path to the Color Picker file.
    
   
3. Add a javascript onclick event to your input field:

   <form>
   ...
   <input size="10" onclick="getMyColor(this)" name="my_color" id="my_color" value="red" onmouseover="this.style.color=this.value;" />
   ...
   </form>

   Note: The input field must be in a form.
    
   
4. Done, Enjoy it!