Creating a Colour-picker field for Drupal

Demo/tutorial on how to create a color-picker field for a Drupal website (since color module is now deprecated).

The source code for this Localgov Microsites Colour Picker Fields module is available on GitHub.

TL;DR

  1. Create a template suggestion for the input field for the fields you want to use a colour picker with.
  2. Add 2 inputs to that template - text input and color input.
  3. Add some JavaScript to say "if either of these inputs are changed, update the other one to match". 

 

Here's an abridged version of the colour picker on CodePen.

 

See the Pen Colour Picker Input by Mark Conroy (@markconroy) on CodePen.

Filed Under:

  1. Drupal Planet
  2. LocalGov Drupal
  3. Twig
  4. CSS
  5. JavaScript
  6. Drupal