Add Color Picker in Magento 2 System Configuration

Color Picker Magento 2

Color Picker Magento 2

Tested in Magento version 2.2.4 and 2.2.5 … 2.3.2

I don’t know about all but in above Magento versions from the admin, if we go to the Store->Configuration and then check the View page source we can see below js


If you open the js you will know it’s a color picker js. So why not use the color picker js which is already loading on the page. No need to add any external JS or CSS.

My solution is as below.

Replace [Vendor] with your Namespace and [Module] with your Modulename.


<?xml version="1.0"?>
<config xmlns:xsi=""
        <tab id="[vendor]" sortOrder="297">
        <section id="[vendor]_[module]" type="text" sortOrder="100" showInDefault="1" showInWebsite="0" showInStore="0">
            <label>[Your Label]</label>
            <group id="[your-group-id]" translate="label" type="text" sortOrder="250" showInDefault="1">
                <field id="[your-field-id]" translate="label" type="text" sortOrder="1" showInDefault="1">
                    <label>Choose Color</label>

For the color picker, all you need is add a field like below

<field id="[your-field-id]" translate="label" type="text" sortOrder="1" showInDefault="1">
     <label>Choose Color</label>

Create [Vendor]/[Module]/Block/ColorPicker.php


namespace [Vendor]\[Module]\Block;

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

     * add color picker in admin configuration fields
     * @param  \Magento\Framework\Data\Form\Element\AbstractElement $element
     * @return string script
    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
        $html = $element->getElementHtml();
        $value = $element->getData('value');

        $html .= '<script type="text/javascript">
            require(["jquery"], function ($) {
                $(document).ready(function (e) {
                        color: "#'.$value.'",
                        onChange:function(hsb,hex,rgb,el,bySetColor) {
                        if(!bySetColor) $(el).val(hex);

        return $html;

That’s it. It solved my problem. So if that js is loading on the page It should definitely work. It is working for me.

  • Richard
    Posted at 20:15h, 18 March Reply

    Good work man. this was super helpful, thank you!

Post A Comment