Back to Top

How to Add Color Picker in Magento 2 Admin Configuration

Updated 22 May 2024

In this article, We will learn about Add Color Picker in Magento 2 Admin configuration using the system.xml file. Which one admin can select the value from the color picker to show dynamic color.

Step-1: Create adminhtml_system_config_edit.xml at app/code/Vendor/ColorPicker/view/adminhtml/layout

<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <css src="jquery/colorpicker/css/colorpicker.css"/>

Step-2: Create system.xml at app/code/Vendor/ColorPicker/etc/adminhtml

<?xml version="1.0"?>
<config xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
        <tab id="Vendor" sortOrder="10">
        <section id="colorpicker" translate="label" type="text" sortOrder="310" showInDefault="1" showInWebsite="0" showInStore="0">
            <group id="colorpickerSetting" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0"> 
            <label>ColorPicker Settings</label>
                <field id="theme_color" translate="label" sortOrder="8" type="text" showInDefault="1" showInWebsite="0" showInStore="0">
                    <label>Theme Color</label>

Step-3: Create Colorpicker.php at app/code/Vendor/ColorPicker/Block


namespace Vendor\Colorpicker\Block;

class Colorpicker extends \Magento\Config\Block\System\Config\Form\Field
     * [_getElementHtml used to get color from color picker]
     * @param  \Magento\Framework\Data\Form\Element\AbstractElement $element
     * @return string
    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 thisElement = $("#' . $element->getHtmlId() . '");
                    thisElement.css("backgroundColor", "'. $value .'");
                        color: "'. $value .'",
                        onChange: function (hsb, hex, rgb) {
                            thisElement.css("backgroundColor", "#" + hex).val("#" + hex);
        return $html;

Hope this will help you.

Thanks ­čÖé

Searching for an experienced
Magento 2 Company ?
Find out More
. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home