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 #519
    In the 519th issue of ProcessWire Weekly we'll check out a new third party module called RockForms, introduce the latest ProcessWire core updates, and more. Read on! / 20 April 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

“ProcessWire is like a breath of fresh air. So powerful yet simple to build with and customise, and web editors love it too.” —Margaret Chatwin, Web developer