How To Add Color Picker In Magento 2

Today I will show you how to add a 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(
lock\Template\Context $context, array $data = []
) {
::__construct($context, $data);
protected function _getElementHtml(
\Magento\Framework\Data\Form\Element\AbstractElement $element
) {
= $element->getElementHtml();
= $element->getData('value');
.= '<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.