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.

Twitter updates

  • Adding custom actions to ProcessWire image fields in the admin, part of this week’s dev branch additions: More
    27 January 2023
  • ProcessWire 3.0.210 new main/master version released— More
    6 January 2023
  • ProcessWire 3.0.209: Core updates and an interesting AI that knows ProcessWire– More
    30 December 2022

Latest news

  • ProcessWire Weekly #456
    The 456th issue of ProcessWire Weekly covers latest core updates, introduces a new third party module called TextformatterRockDown, and more. Read on! / 4 February 2023
  • ProcessWire 3.0.210 new main/master version
    140 commits, 55 resolved issues, dozens of new features, eight contributors, and five new pull requests make yet another great new version of ProcessWire.
    Blog / 6 January 2023
  • Subscribe to weekly ProcessWire news

I just love the easy and intuitive ProcessWire API. ProcessWire rocks!” —Jens Martsch, Web developer