Magento 2: How to Add a Color Picker to Custom Admin Grid Form

Learn how to add a color picker field to a custom Magento 2 admin grid form. This allows administrators to select colors easily from the backend instead of manually entering hexadecimal color codes.

Overview

Magento 2 does not provide a color picker field by default for custom admin forms. However, using a custom renderer and the jQuery ColorPicker library, you can easily integrate a color selection field into your admin grid forms. In this tutorial, we will add a color picker field that allows administrators to select colors visually.

Step 1: Create layout_index_edit.xml File

Create the following layout XML file:

app/code/Vendor/Extension/view/adminhtml/layout/layout_index_edit.xml 
<head>
    <css src="jquery/colorpicker/css/colorpicker.css"/>
</head>

This XML file loads the ColorPicker CSS file in the Magento admin panel.

Step 2: Update Admin Form.php

Open your custom admin form file and add a text field that will store the selected color value.

app/code/Vendor/Extension/Block/Adminhtml/Grid/Edit/Form.php
``` 
// Replace your database field name with "field_name"

$field = $fieldset->addField(
    'field_name',
    'text',
    [
        'name'  => 'field_name',
        'label' => __('Select Color'),
        'title' => __('Select Color')
    ]
);

$renderer = $this->getLayout()
    ->createBlock('Vendor\Extension\Block\Adminhtml\Color');

$field->setRenderer($renderer);

The custom renderer will replace the standard text field with a color picker interface.

Step 3: Create Color.php Renderer

Create a custom renderer block that initializes the jQuery ColorPicker plugin.

app/code/Vendor/Extension/Block/Adminhtml/Color.php 
<?php

namespace Vendor\Extension\Block\Adminhtml;

class Color extends \Magento\Config\Block\System\Config\Form\Field
{
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        array $data = []
    ) {
        parent::__construct($context, $data);
    }

    protected function _getElementHtml(
        \Magento\Framework\Data\Form\Element\AbstractElement $element
    ) {
        $html = $element->getElementHtml();
        $value = $element->getData('value');

        $html .= '<script type="text/javascript">
        require(["jquery","jquery/colorpicker/js/colorpicker"], function ($) {
            $(document).ready(function () {
                var $el = $("#' . $element->getHtmlId() . '");

                $el.css("backgroundColor", "' . $value . '");

                $el.ColorPicker({
                    color: "' . $value . '",
                    onChange: function (hsb, hex, rgb) {
                        $el.css("backgroundColor", "#" + hex)
                           .val("#" + hex);
                    }
                });
            });
        });
        </script>';

        return $html;
    }
}

This renderer initializes the ColorPicker plugin and automatically updates the selected color value inside the form field.

Result

After implementing this customization, administrators can:

  • Select colors visually from the admin panel.
  • Avoid manually entering hexadecimal color values.
  • Improve backend user experience.
  • Store color values directly in database fields.
  • Create more user-friendly Magento 2 admin forms.