RockColorPicker by bernhard

Main RockColorPicker Module


Super simple color (and custom HTML) picker for ProcessWire:


On non-required fields the selected color can be unselected by clicking the color again. The module also supports selecting colors via keyboard input (tab to focus color and then space/enter to select/unselect).


The colors of your field must be defined in /site/init.php:

  function (HookEvent $event) {
    // set colors of field "site_bgcolor"
    // labels are translatable
    $event->object->setColors('site_bgcolor', [
      'blue' => ['#acefee', __('blue')],
      'yellow' => ['#ffe36c', __('yellow')],
      'rose' => ['#ffc5df', __('rose')],
      'green' => ['#b5ffb2', __('green')],
      'violet' => ['#d5bfff', __('violet')],

    // set colors of field "another_field"
    $event->object->setColors('another_field', [
      'red' => ['#ff0000', 'This is red'],
      'green' => ['#00ff00', 'This is green'],
      'blue' => ['#0000ff', 'This is blue'],

    // custom CSS + HTML example
    $event->object->setColors('site_bgcolor', [
      // custom css
      'custom' => [
        'background: rgb(34,0,255); background: linear-gradient(90deg, rgba(34,0,255,1) 0%, rgba(0,0,0,1) 100%);',
        'Blue to black gradient'
      // custom html
      'custom2' => [
        '<div style="width:200px;">
          custom html demo �
        'Custom HTML demo :)'

Accessing the field values

Formatted value:


Unformatted value:


Why is there no GUI for setup?

Building a GUI for this field would be extremely hard because we need a connection between the color name, css-code and the label, but the label would need to be multi-language. Having a regular multilang textarea with language tabs would mean that we'd have to repeat all the colors for every language and also repeat all the css-codes. That's less than ideal so I chose to go with a code-only fieldtype so that one can setup colors once and then translate labels if need be.

Install and use modules at your own risk. Always have a site and database backup before installing new modules.

Latest news

  • ProcessWire Weekly #523
    In the 523rd issue of ProcessWire Weekly we'll check out what's new in the core this week, share some new module related news, and more. Read on! / 18 May 2024
  • ProFields Table Field with Actions support
    This week we have some updates for the ProFields table field (FieldtypeTable). These updates are primarily focused on adding new tools for the editor to facilitate input and management of content in a table field.
    Blog / 12 April 2024
  • Subscribe to weekly ProcessWire news

“We were really happy to build our new portfolio website on ProcessWire! We wanted something that gave us plenty of control on the back-end, without any bloat on the front end - just a nice, easy to access API for all our content that left us free to design and build however we liked.” —Castus, web design agency in Sheffield, UK