When it comes to building online E-commerce store, Magento is first pick of store owners due to its ability to mold Magento according to meet unique need of store owners. Sometimes you require to allow admin change the UI of frontend such as background color of pages, layout color etc. To implement this functionality, you need to add color picker in Magento 2 System configuration. So, today I’m sharing 3 steps guide to add Color Picker in Magento 2 System Configuration.

On the very first step, we need to add color picker to textbox through system.xml file located at

Once a code is added, now we have to create one Color.php file at below location under the hood of extension app\code\Vendor\Extension\Block
At last, we need to implement JavaScript color picker library to adminhtml_system_config_edit.xml file available at app\code\Vendor\Extension\view\adminhtml\layout
Tadaa, now clear the cache and navigate to system configuration and you can see color picker option. You can even customize and use this code to place color picker anywhere in Magento.

Comment down below if you face any issue while implementing this code. And Yeah, don’t forget to hit below stars.
Happy Coloring!

Click to rate this post!
[Total: 10 Average: 4.4]