Color Field - Spectrum Widget
Color Field - Simple Widget
Color Field - Default Widget
Color Field - Default Widget

Color Field is simple field that use a hexadecimal notation (HEX) for the combination of Red, Green, and Blue color values (RGB).
Opacity is also supported and can be disabled/enabled per specific field instance.

Current features

Formatters

  • Plain text - as HEX code(#FF0080) or RGB(163,73,164) with or without opacity such as RGBA(0,0,255,1.0)
  • Css Declaration (color/background-color) - supports tokens
  • Color swatch - rectangle, circle or parallelogram

Widgets

Views

  • Tokens/Replacement Pattern in CSS Declaration in Views

Multiple fields on the same entity is supported either directly on the entity or
through Field Collections (Drupal 7) or Paragraphs (Drupal 7+) or other entity
reference methods.

Versions

Drupal 8+

Actively supported for Drupal 9.4 and over.

  • 3.0.x Drupal 9/10, Active development and functional branch. Has a test suite and tests are now required for most bug fixes and feature requests to be committed.
  • 8.x-2.x: Drupal 8/9. Minorly supported.
  • 8.x-1.x: Deprecated

Drupal 7

Predominantly unsupported except for security purposes.

  • 7.x-1.x: 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.
  • 7.x-2.x offers a lot of new improvements and was
    the active Drupal 7 branch for new features and UI improvements.
    There is a stable release, but has had less testing than ideal
    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.

Basic installation

Drupal 8 & 9

Install however you normally install modules - see the User Guide.
Using composer is recommended - ideally, using
Asset Packagist to install dependencies as well.

Optional Libraries should be in the libraries/ folder

Drupal 7

Install as you normally install modules - see the documentation.
Installing via composer is recommended if you are using composer on your site.

Requirements

No hard requirements. However, to use some widgets with external JavaScript requirements,
the libraries module is needed.

Optional libraries should be in the sites/all/libraries/ folder

Drush Support

Color_field 7.x-2.x includes Drush commands to download optional JavaScript color picker
libraries (required for some widgets).

Optional Libraries

jQuery Simple Color Plugin

If you want to use the jQuery Simple Color plugin you need to download it via
composer/drush or manually and place it in your libraries folder with the folder
named jquery-simple-color

jQuery Spectrum Color Plugin

To use the spectrum widget, you need the jQuery Spectrum
library. Install with Composer/Drush or manually and name the folder bgrins-spectrum.
jQuery Spectrum requires jQuery v1.5.0 or later.

Usage

See the readme included with each version of the module for exact details.
As it is a field, the general process whether Drupal 7, 8 or 9 is:

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

Credit

Websites reported to use the module

Supporting organizations: 
Sponsored creation & development (written by Calcus David). For professional support and development services contact us.
8.x-2.x maintenance

Project information

Releases