Last updated 24 May 2012. Created on 4 November 2011.
Edited by gagarine, chales, plopesc. Log in to edit this page.

The Drupal 7 branch of Jquery Colorpicker offers a form element than can be included in any form in this way:

$form['element'] = array(
  '#type' => 'jquery_colorpicker',
  '#title' => t('Color'),
  '#default_value' => 'FFFFFF',

This module includes Field API integration. A colorpicker field can be added to any content type with the JQuery Colorpicker widget

Installation guide

  1. Install
  2. Install the module as you would any other Drupal module
  3. Go to and download
  4. Extract the the zip file content to the colorpicker folder in your libraries folder.
  5. If you have extracted the contents right, the following filepath should exist: [path to libraries folder]/colorpicker/js/colorpicker.js

Looking for support? Visit the forums, or join #drupal-support in IRC.


juanitouy’s picture


Im trying to use it, and it's doesn't work.

$form['my_example_backgroundColor'] = array(
    '#type' => 'jquery_colorpicker',
    '#title' => t('Background Color'),
    '#default_value' => variable_get('my_example_backgroundColor', 'FFFFFF'),

I installed "libraries" module, and I put "colorpicker" folder, inside the "libraries" folder.


My module is


I'm very new in drupal

I'm learning

Thank you!

sergey-shulipa’s picture

Hello, juanitouy! Did you make a progress? If so, please, help me! I've added colorpicker as a form component property:
$form['display']['color'] = array(
'#type' => 'jquery_colorpicker',
'#title' => t('Color'),
'#default_value' => 'FFFFFF',
Colorpicker is displaying correctly, but I can't change $component background.

sh.manishshukla’s picture

Please follow the below path:

for jquery_colorpicker path will be:

For Colorpicker folder path will be:

And my code is:

$form['color'] = array(
       '#type' => 'jquery_colorpicker',
	   '#title' => t('Color'),
	   '#default_value' => 'FFFFFF',