Color Picker Field

Color Picker Field adds a Color field type to Drupal. Editors pick a color with the browser's color picker, type a hex code, or click a swatch from a palette you define. Show the color as a swatch, or use it to color the content itself: its text, background or border, or a CSS custom property your theme can use.

Use it for brand or accent colors per page, color-coded categories, product colors, event themes, or any content that needs a color.

Features

• A Color field for any fieldable entity: content, taxonomy terms, users, media, paragraphs, custom blocks and more.
• Palette: offer a set of named colors, such as your brand colors, as swatches to click. Optionally, allow those colors only.
• Friendly widget:
  • the browser's color picker, with the palette colors suggested;
  • swatches with names;
  • a text box to type or paste a hex code;
  • a "No color" option, so optional fields can stay empty.
• Validation: only real hex colors are saved, in one form (#ABC becomes #aabbcc), and palette-only fields accept palette colors only.
• Three formatters:
  • Swatch: square, rounded or round, any size, with the palette label, the hex code, both or nothing;
  • Colored text: the hex code, written in the color;
  • Style the content: applies the color to the whole entity, as its text, background or border color.
• Readable text: on a colored background, the text can switch to black or white, whichever contrasts more, following the WCAG contrast formula.
• For themers: the color is also set as a CSS custom property, such as --field-accent-color, to use anywhere in the content with var().
• Accessible: swatch buttons and swatches have text labels for screen readers.

Requirements

• Drupal 10.3 or later, or Drupal 11.
• The core Field module.

Installation

Install as you would normally install a contributed Drupal module. For further information, see Installing Drupal Modules.

composer require drupal/color_picker_field
drush pm:enable color_picker_field

Configuration

1. Add a field of type Color to a content type or other entity bundle.
2. In the field settings, optionally enter a palette, one color per line, as #hex or #hex|Label:
   

   #0b5fff|Brand blue
   #ff6600|Orange
   #1f2937|Charcoal

   Check Only allow colors of the palette to restrict editors to it.

3. In Manage form display, the Color picker widget can show or hide the hex code text box.
4. In Manage display, choose Swatch, Colored text or Style the content.

Styling content with its color

With the Style the content formatter, the color is added to the content's wrapper, for example:

<article class="color-picker-field-styled ..."
  style="--field-accent-color: #1f2937; background-color: #1f2937; color: #ffffff;">

• Headings, paragraphs and links inside take the color, even where the theme sets its own.
• On a colored background, the content gets some padding, adjustable with --color-picker-field-padding.
• Use the custom property in your theme, for example border-left: 4px solid var(--field-accent-color);.

Upgrading from 1.0

Run drush updatedb.

• Version 1.0 kept the color picked on the edit form in the editor's own browser, and colored the text of every node shown in that browser. To color content, use the Style the content formatter with Text color: it uses the color saved on each piece of content, for every visitor.
• Existing values and displays are kept.

Support

Report bugs and request features in the issue queue.