Color Field

Color Field is simple field that use a hexadecimal notation (HEX) for the combination of Red, Green, and Blue color values (RGB).

Live examples:
Pre-selected Color Boxes
Multiple Pre-selected Color Boxes
jQuery Simple Color
jQuery Spectrum Color

Current features

New! Support multiple Field Collections!
Live examples:
Field Collections1
Field Collections2
Field Collections3

Formater

• Plain text HEX code (#FFFFFF)
• Css Declaration (color/background-color)
• Color swatch field formatter

Widget

• Plain Text
• Pre-selected Color Boxes
• jQuery Simple Color
• Spectrum Color Picker

Views

• Tokens/Replacement Pattern in CSS Declaration in Views

Drush Support

• Download the jQuery Simple Color (version 1.0.1)

What is the difference between 1.x and 2.x?

The 7.x-1.x version is the stable and recommended version for most users and production sites. It has reached feature freeze and will not be getting any new features, only bug fixes.

The 7.x-2.x version offers a lot of new improvements and is currently the active development version for new features and UI improvements. It's not yet ready for production. Bugs fixed in 7.x-2.x will also be fixed in 7.x-1.x if possible. See the wiki page on differences between the 1.x and 2.x versions for more detailed information. You can upgrade from 1.x to 2.x but make sure to backup your DB. Please report any upgrade issues.

Road Map

1. Make this module a base that could be used by any color picker.
2. include http://www.eyecon.ro/colorpicker/
3. include http://www.dematte.at/colorPicker/
4. include http://acko.net/blog/farbtastic-jquery-color-picker-plug-in

Requirements

No specific requirement but you will need the libraries module if you want the use the jQuery simple color widget.

Basic installation

1. Place this module directory in your modules folder (this will usually be "sites/all/modules/").
2. Enable the module within your Drupal site at Administer -> Site Building -> Modules (admin/build/modules).

jQuery Simple Color Plugin support

If you want to use the jquery simple color plugin you need to download it and place it in your libraries folder (this will usually be "sites/all/libraries/").
You can download the plugin by using the following links or by Drush. Make sure you rename the folder jquery-simple-color so you get sites/all/libraries/jquery-simple-color/jquery.simple-color.js.

• https://github.com/recurser/jquery-simple-color

jQuery Spectrum Color Plugin support

If you want to use this plugin you need to download it, rename it as bgrins-spectrum and place it in your libraries folder (this will usually be "sites/all/libraries/"). So you will end up with js available under sites/all/libraries/bgrins-spectrum/spectrum.js. jQuery Spectrum requires jQuery v1.5.0 or later.

• http://bgrins.github.io/spectrum/

Usage

Field

1. Add the field to a node/entity
2. Select the 'Color Field' field type
3. Select the 'Color' widget you want

Credit

Maintainer and developer: targoo


Development sponsored by Marique Calcus and written by Calcus David. For professional support and development services contact Marique Calcus.

Websites reported to use the module

• TwoTravelTheWord