How To Add Color Picker In Magento 2

Today I will show you how to add color picker in system configuration. It will help users to change the frontend color quickly and conveniently. You can do this through a few steps.

Steps to Add Color Picker in Magento 2 System Configuration :

Step 1:

Add color picker to textbox through system.xml file located at

 

File: /app/code/Magepow/Custom/etc/adminhtml/system.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
    <tab id="magepow" translate="label" sortOrder="10">
        <label>Magepow</label>
    </tab>
    <section id="custom" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
        <label>Magepow Custom</label>
        <tab>magepow</tab>
        <resource>Magepow_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>Magepow\Custom\Block\Color</frontend_model>
            </field>
        </group>
    </section>
</system>

Step 2:

Create Color.php under /app/code/Magepow/Custom/Block

 

File: /app/code/Magepow/Custom/Block/Color.php

<?php

namespace Magepow\Custom\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;
    }
}

Step 3:

Now refresh Magento cache

php bin/magento cache:flush

 

Done. Hope this post helps you in some way.