Vendor : Colorpicker

                  
                    <input readonly autocomplete="off" type="text" name="my_picker" class="form-control bg-transparent pick_inline">

                    <!-- instead of input (or both) -->
                    <!-- <span class="pick_inline"></span> -->

                    <div class="colorpicker"
                      data-theme="classic" 
                      data-target=".pick_inline" 
                      data-color="#42445a" 
                      data-live-update="true" 

                      data-hex="true" 
                      data-rgba="true" 
                      data-hsla="true" 
                      data-hsva="true" 
                      data-cmyk="true" 

                      data-save="false" 
                      data-clear="true" 

                      data-lng-save="Save" 
                      data-lng-clear="Clear" 
                      
                      data-inline="true" 
                      data-use-as-button="true" 
                      data-default="HEXA"></div>
                  
                

                  
                    <!-- 
                      data-theme="classic|monolith|nano" 
                      data-color="#ff0000"  - default start color
                     -->
                    <div class="input-group-over position-realtive z-index-1 bg-white">

                      <input autocomplete="off" type="text" class="form-control bg-transparent colorpicker"
                        data-theme="classic" 
                        data-color="#ff0000" 

                        data-hex="true" 
                        data-rgba="true" 
                        data-hsla="false" 
                        data-hsva="false" 
                        data-cmyk="false" 

                        data-lng-save="Save" 
                        data-lng-clear="Clear" 
                        
                        data-position="bottom-middle" 
                        data-show-always="false" 
                        data-use-as-button="true" 
                        data-default="HEXA">

                      <!-- optional icon -->
                      <span class="fs-2 mx-3 fi mdi-format_color_fill z-index-n1 text-muted"></span>

                    </div>
                  
                

                  
                    <!-- 
                      data-theme="classic|monolith|nano" 
                      data-color="#ff0000"  - default start color
                     -->
                    <div class="input-group-over position-realtive z-index-1">

                      <input autocomplete="off" type="text" name="my_picker" class="form-control bg-transparent colorpicker"
                        data-theme="classic" 
                        data-color="#ff0000" 

                        data-hex="true" 
                        data-rgba="true" 
                        data-hsla="false" 
                        data-hsva="false" 
                        data-cmyk="false" 
                      
                        data-id="1" 
                        data-ajax-url="../demo.files/php/demo.ajax_request.php" 
                        data-ajax-params="['action','color_change']['section','customer_invoice']" 
                        data-ajax-method="POST" 
                        data-toast-success="Sucessfully Updated!"
                        data-toast-position="bottom-center"

                        data-lng-save="Save" 
                        data-lng-clear="Clear" 

                        data-position="bottom-middle" 
                        data-show-always="false" 
                        data-use-as-button="true" 
                        data-default="HEXA">

                      <!-- optional icon -->
                      <span class="fs-5 mx-3 fi mdi-format_color_fill z-index-n1 text-muted"></span>
                    
                    </div>