Follow below step
Create System.xml at Below Path
app/code/Emizentech/Newsletter/etc/adminhtml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<tab id="emizentechnewsletter" translate="label" sortOrder="700">
<label>Emizentech Newsletter Pop-up</label>
</tab>
<section id="emizentechnewsletter" translate="label" sortOrder="500" showInDefault="1" showInWebsite="1" showInStore="1">
<class>separator-top</class>
<label>Emizentech Newsletter Configuration</label>
<tab>emizentechnewsletter</tab>
<resource>Emizentech_Newsletter::config</resource>
<group id="txt" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Emizentech</label>
<field id="colorsample" translate="label" type="text" sortOrder="4" showInDefault="1" showInWebsite="0" showInStore="1">
<label>Font color for newsletter popup</label>
<comment><![CDATA[Text color]]></comment>
<frontend_model>Emizentech\Newsletter\Block\Color</frontend_model> <!-- Our block for attaching color picker to text box -->
</field>
</group>
</section>
</system>
</config>
Create Color.php File at below Path
<?php
namespace Emizentech\Newsletter\Block;
class Fontcolor extends \Magento\Config\Block\System\Config\Form\Field {
/**
* @param \Magento\Backend\Block\Template\Context $context
* @param Registry $coreRegistry
* @param array $data
*/
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","jquery/colorpicker/js/colorpicker"], function ($) {
$(document).ready(function () {
var $el = $("#' . $element->getHtmlId() . '");
$el.css("backgroundColor", "'. $value .'");
// Attach the color picker
$el.ColorPicker({
color: "'. $value .'",
onChange: function (hsb, hex, rgb) {
$el.css("backgroundColor", "#" + hex).val("#" + hex);
}
});
});
});
</script>';
return $html;
}
}
Add color picker CSS library:
Create adminhtml_system_config_edit.xml at Below Path
app/code/Emizentech/Newsletter/view/adminhtml/layout
<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<head>
<css src="jquery/colorpicker/css/colorpicker.css"/>
</head>