How to add color picker in Magento 2 system configuration

In this tutorial, I will explain you how to add color picker in system configuration in Magento 2. Sometimes, while developing an extension, you have to give admin the permission to frontend UI control of specific pages. For ex. If admin want to change background color, font color, border color etc. of the pages then, they can able to change from system configuration using color picker and set color value.

If you want to create separate module, then you can take reference from here. After that, I am going to tell you that which changes you need to add in system configuration to add color picker field. Generally, Configuration of the settings available in store -> configuration admin menu. So, you need to add the color picker in store -> configuration menu.

Steps to Add Color Picker in Magento 2 System Configuration :

Module Name : RH
Vendor Name : CustomColorPicker

1) Add color picker to textbox through system.xml file located at app\code\RH\CustomColorPicker\etc\adminhtml

Copy Code


<?xml version="1.0"?>
<!--
/**
 * Created By : Rohan Hapani
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="rh" translate="label" sortOrder="10">
            <label>RH</label>
        </tab>
        <section id="customcolorpicker" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>RH Custom Color Picker</label>
            <tab>rh</tab>
            <resource>RH_AllProducts::config</resource>
            <group id="color_group" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>General Settings</label>
                <field id="color_field" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Background Color</label>
                    <comment><![CDATA[Background color]]></comment>
                    <frontend_model>RH\CustomColorPicker\Block\Color</frontend_model>
                </field>
            </group>
        </section>
    </system>
</config>

2) Create Color.php file at app\code\RH\CustomColorPicker\Block

Copy Code


<?php
/**
 * Created By : Rohan Hapani
 */
namespace RH\CustomColorPicker\Block;

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"], function($) {
                $(document).ready(function(e) {
                    $("#' . $element->getHtmlId() . '").css("background-color", "#' . $value . '");
                    $("#' . $element->getHtmlId() . '").colpick({
                        layout: "hex",
                        submit: 0,
                        colorScheme: "dark",
                        color: "#' . $value . '",
                        onChange: function(hsb, hex, rgb, el, bySetColor) {
                            $(el).css("background-color", "#" + hex);
                            if (!bySetColor) $(el).val(hex);
                        }
                    }).keyup(function() {
                        $(this).colpickSetColor(this.value);
                    });
                });
            });
            </script>';
        return $html;
    }
}

That’s all for this technical blog , try this with clean cache after add these codes and check it in store configuration. The color picker option will be displayed.

Now, just click on color picker text box field and choose color which you want to select and just save config. It will save value of color which you selected.

I hope this blog will helpful for easily understand about how to add color picker in Magento 2 system config. In case, I missed anything or need to add some information, always feel free to leave a comment in this blog, I’ll get back with proper solution