Creating a Colour-picker field for Drupal

Author: Mark Conroy
Date:

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.

Join the "Something nice ..." newsletter

The full title is "Something nice, something quirky, something else".

I send an email once a week with something nice, something quirky, and something else that I think is interesting (all with a web development theme, of course).

Tags