This module provides a "Color" field type that allows users to select colors using hexadecimal notation (HEX) and optionally include opacity. It offers various formatters for displaying colors, such as HEX codes, RGB(A) values, CSS declarations, and color swatches. Several widgets are included for color selection, including HTML5 color pickers and JavaScript-based options.
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
- HTML5 Drupal 8+
- Plain Text
- Pre-selected Color Boxes
- jQuery Simple Color
- Spectrum Color Picker
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:
- Add the field to a node/entity
- Select the Color field form widget type
- Select the Color widget you want
Credit
- targoo: Creator
- Nick Dickinson-Wilde: Maintainer
Websites reported to use the module
- Well Go USA (Drupal 8)