Create Color Attribute for Category and add ColorPicker to it

Following code is a Installation script for the custom module. This code creates a category Attribute "catcolor".

It will be displayed when you manage categories.

<?php
$installer = $this;
$installer->startSetup();
$installer->addAttribute("catalog_category", "catcolor",  array(
    "type"     => "varchar",
    "backend"  => "",
    "frontend" => "",
    "label"    => "Color Category",
    "input"    => "text",
    "class"    => "",
    "source"   => "",
    "global"   => Mage_Catalog_Model_Resource_Eav_Attribute::SCOPE_GLOBAL,
    "visible"  => true,
    "required" => false,
    "user_defined"  => false,
    "default" => "",
    "searchable" => false,
    "filterable" => false,
    "comparable" => false,
    "input_renderer"=> 'colorcategories/adminhtml_helper_color',
    'group'         => 'General Information',	
    "visible_on_front"  => false,
    "unique"     => false,
    "note"       => ""
));
$installer->endSetup();

?>

Create a file app\code\local\<NameSpace>\<ModuleName>\Block\Adminhtml\Helper\Color.php

Add the following script to this file.

<?php
class <NameSpace>_<ModuleName>_Block_Adminhtml_Helper_Color extends Varien_Data_Form_Element_Text
{
  
  public function getElementHtml()
  {
      $html = '
          <link rel="stylesheet" href="'.Mage::getBaseUrl('js') . 'colorpicker/css/colorpicker.css" type="text/css" />
          <script type="text/javascript" src="' . Mage::getBaseUrl('js') . 'colorpicker/jquery.js' .'"></script>
              <script type="text/javascript" src="' . Mage::getBaseUrl('js') . 'colorpicker/colorpicker.js' .'"></script>
              <script type="text/javascript" src="' . Mage::getBaseUrl('js') . 'colorpicker/eye.js' .'"></script>
              <script type="text/javascript" src="' . Mage::getBaseUrl('js') . 'colorpicker/utils.js' .'"></script>
              ';
       $html .= parent::getElementHtml();
        $html .= "<script type=\"text/javascript\">
               var cjq = jQuery.noConflict();
            (function(cjq){
                cjq('#".$this->getHtmlId()."').ColorPicker({
                	onSubmit: function(hsb, hex, rgb, el) {
                		cjq(el).val('#'+hex);
                		cjq(el).ColorPickerHide();
                	},
                	onBeforeShow: function () {
                		cjq(this).ColorPickerSetColor(this.value);
                	}
                }).bind('keyup', function(){
                	cjq(this).ColorPickerSetColor(this.value);
                });
          })(jQuery);
          </script>";
        return $html;
    }

    /**
     * Procolor JS code to display color picker
     *
     * @see http://procolor.sourceforge.net/examples.php
     * @param string $htmlId
     * @return string
     */
    protected function _getProcolorJs($htmlId)
    {
        return '<script type="text/javascript">ProColor.prototype.attachButton(\'' . $htmlId . '\', { imgPath:\'' . Mage::getBaseUrl('js') . 'herve/systemcolorpicker/procolor-1.0/' . 'img/procolor_win_\', showInField: true });</script>';
    }

    /**
     * Prototype validation
     *
     * @return string
     */
    protected function _addHexValidator()
    {
        return '<script type="text/javascript">Validation.add(\'validate-hex\', \'' . Mage::helper('systemcolorpicker')->__('Please enter a valid hex color code') . '\', function(v) {
				return /^#(?:[0-9a-fA-F]{3}){1,2}$/.test(v);
			});</script>';
    }
}
?>

DOWNLOAD jQuery Color picker add on.

UNZIP the downloaded addon and copy the files into Magento root directory as mentioned below.

jQuery Addon File                 Magento RootDirectory

js/colorpicker.js                 js/colorpicker/colorpicker.js

js/eye.js                         js/colorpicker/eye.js

js/utils.js                       js/colorpicker/utils.js

js/layout.js                      js/colorpicker/layout.js 

css/*                             js/colopicker/css/*

images/*                          js/colopicker/images/*

Now you will get the color picker as shown below