Last updated November 4, 2011. Created on November 4, 2011.
Edited by plopesc. Log in to edit this page.


This module creates a new Form API element type: colorpicker, which relies on the 3rd party integration of the jquery colorpicker. After enabling this module and downloading the relevant files from the site linked above, a new form element can be created.

This will automatically place the colorpicker into the form, allowing users of the form to choose a color from the jquery colorpicker.

Installation Instructions

  1. Install the module as you would any other Drupal module
  2. Go to and download
  3. Extract the following three files from the zip file to the folder jquery_colorpicker/colorpicker.
    • css
    • js
    • images
  4. If you have extracted the contents right, the following filepath should exist: [path to modules folder]/jquery_colorpicker/colorpicker/js/colorpicker.js

Javascript Degradation

This module is set to gracefully degrade to an input type text if the user has javascript turned off. The field will require a 6 digit hexadecimal color code to be inputted.

IE6 Support

The jquery colorpicker relies on .png files with transparency. As IE6 does not natively support transparency in .png files, Jay has put together some IE6 support for this module. However, he does not have a natural copy of IE6 with which to do testing, and have only tested using an IE6 emulator. In the Drupal 7 version, he has included IE6 support, however I will probably drop this in a future release, unless someone explicitly mentions that they are using it.

To enable IE6 support, do the following:

  1. Inside the jquery colorpicker module folder (generally located at sites/all/modules), create a new folder named "twin_helix". If the jquery colorpicker module is in the standard location, this means you will have the folder sites/all/modules/twin_helix
  2. Download from Twin Helix
  3. Unpack the zip file, and place the following three files into the twin_helix folder you created in step 1:
    • blank.gif
    • iepngfix_tilebg.js
  4. Navigate to admin/settings/jquery_colorpicker, check the box at the bottom, and save the page


You may also want to check out the Colorpicker module which does essentially the same thing using the Farbtastic javascript library.

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