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="" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <tab id="magepow" translate="label" sortOrder="10">
    <section id="custom" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
        <label>Magepow Custom</label>
        <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>

Step 2:

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


File: /app/code/Magepow/Custom/Block/Color.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({
                        color: "#' . $value . '",
                        onChange:function(hsb,hex,rgb,el,bySetColor) {
                        if(!bySetColor) $(el).val(hex);

        return $html;

Step 3:

Now refresh Magento cache

php bin/magento cache:flush


Done. Hope this post helps you in some way.