wt_color_library

WT Color Library provides a beautifully styled way to manage and select colors in Drupal using taxonomy terms, replacing standard radio buttons with an interactive grid of visual color swatches.

Instead of forcing content editors to type hex codes into text fields on every single node or relying on clunky third-party JavaScript color pickers, this module allows site builders to establish a strict, centralized brand palette. When editors create content, they simply click on the visual swatch they want. It is lightweight, uses native HTML5 features, and is designed to make the editorial experience as smooth as possible.

Features

This module transforms standard entity reference radio buttons into a styled grid of color swatches.

Unique features include:

Centralized Palette Management: Colors are stored as Taxonomy Terms, meaning you manage your brand colors in one place. Update a color once, and it reflects everywhere that term is referenced.

Dual-Input Support: Supports standard Hex codes using the native HTML5 , OR raw CSS input, allowing for complex CSS variables or linear-gradient() backgrounds!

Taxonomy Overview Preview: Injects a custom "Color Preview" column directly into the Drupal taxonomy overview page so administrators can visually see their palette at a glance.

Plug-and-Play Configuration: Installs with a pre-configured vocabulary, field storage, and Entity Reference View out of the box.

Use Cases:

Sites where editors need to select a background color or gradient theme for a specific landing page or hero banner.

Categorizing blog posts or events by a specific brand color.

Post-Installation

Once the module is installed, follow these steps to use it on your site:

1. MANAGE YOUR COLORS

Navigate to the WT Color Library vocabulary:
Path: /admin/structure/taxonomy/manage/wt_color_library/overview

Add terms for each color you want to use. You can either select a solid
color using the Hex field (which uses your browser's native color picker)
OR you can enter raw CSS (e.g., `linear-gradient(90deg, #ff0000, #0000ff)`)
in the CSS field. Note: CSS takes priority over Hex.

2. REVIEW THE REFERENCE VIEW (Optional)

The module provides an Entity Reference View that feeds the color selections.
Path: /admin/structure/views/view/color
You can modify this view if you want to change the sort order or filter out
unpublished colors.

3. ATTACH THE FIELD TO YOUR CONTENT

To use the color selector on a content type (e.g., Article):
a. Go to Structure > Content Types > [Your Content Type] > Manage fields.
b. Click "Add field", choose "Re-use an existing field", and select
"Entity reference: field_wt_color_library_ref".
c. On the Field Settings page, scroll down to "Reference type".
d. Change "Reference method" to: "Views: Filter by an entity reference view".
e. Under "View used to select the entities", select: "color - Entity Reference".
f. Save the field settings.

4. SET UP THE WIDGET

a. Click the "Manage form display" tab for your content type.
b. Find your new Color Library field.
c. Change the widget to "Check boxes/radio buttons".
d. Save.

Now, when you create or edit a node of that type, your editors will see a
grid of interactive visual color swatches!

5. THEMING / TWIG USAGE (Front-end)

To output the selected color in your theme, you need to extract the values
from the referenced taxonomy term in your Twig templates (e.g., inside
`node.html.twig` or `paragraph.html.twig`).

Here is a working example of how to check for the CSS value first, fall
back to the Hex value, and apply it as an inline background style using
Drupal's attributes array:

   {# COLOR LOGIC #}
   {% if node.field_wt_color_library_ref.entity %}
     {% set color_term = node.field_wt_color_library_ref.entity %}
     {% set css_val = color_term.field_wt_color_css.value %}
     {% set hex_val = color_term.field_wt_color_hex.value %}
     
     {# CSS value takes priority over Hex #}
     {% set final_color_value = css_val ? css_val : hex_val %}
     
     {% if final_color_value %}
       {% set classes = classes|merge(['bkgcolor']) %}
       {% set attributes = attributes.setAttribute('style', attributes.style ~ ' background: ' ~ final_color_value ~ ';') %}
     {% endif %}
   {% endif %}
   
   {# Example HTML output #}
   <article{{ attributes.addClass(classes) }}>
     {{ content }}
   </article>

Additional Requirements

This module is incredibly lightweight and requires no external JavaScript libraries. It relies purely on the following Drupal Core modules:

• Options
• Taxonomy
• Views

Core version requirement: ^11

Recommended modules/libraries

Gin Admin Theme: While this module works perfectly with Claro, pairing it with the Gin admin theme provides an exceptionally clean UI for the taxonomy overview and node edit forms.

Similar projects

Color Field: Color Field is a popular module, but it stores color values directly on the entity and often relies on third-party JavaScript color picker libraries (like Spectrum.js). WT Color Library differentiates itself by using Taxonomy to enforce a strict, centralized site-wide palette, and it natively supports CSS gradients without requiring any heavy external JS libraries.