How insert a colorpicker using JQuery into the html

Hey all!

I'm trying to implement some methods to let our clients customize their website (our template) and actually I'm trying to insert a colorPicker into the html.

Right know we make it via 2 forms: - custom-heder-bg

custom-footer ---> background ---> text color

Any advice please as to how I should do it? I read about it but I cannot implement it, I don't know where to start.

I would prefer to use a color picker that makes users be able to insert the color via #HEX also and rgba(plus, not needed) because maybe our clients have to #HEX code in the logo or something and have it be really comfortable for them.

Thanks a lot!

PS: sorry for my English guys and have a great day.

jsfiddle: https://jsfiddle.net/g7zhtfh5/embedded/result/

<h4>Personalización de los colores</h4>
        <br/>
        <h5>Cabecera</h5>
        <form name='formServicioRemoteApps-header-bgcolor' id='formServicioRemoteApps-header-bgcolor' role="form" method='post' enctype="multipart/form-data" action='' accept-charset='utf-8'>
            <!-- Seccion para personalizar los colores del header -->
            <div class="form-group seccion-header-bgcolor">
                <label>
                    Color del fondo: <button>poner picker color</button>
                </label>
                <div class="form-group clearfix">
                    <div class="pull-right">
                        <input type="hidden" id="tokenForm_imagenes" name="tokenForm" value="<?php echo $this->tokenForm; ?>">
                        <input type="hidden" id="idSite_imagenes" name="idSite" value="<?php echo $this->infoSite_mysql[0]->id ?>">
                        <button type="submit" class="btn btn-primary"><?php echo $this->traduccion['boton_aceptar']; ?></button>
                    </div>
                </div> 
            </div>
        </form>

        <h5>Pie de página</h5>
        <form name='formServicioRemoteApps-footer-bgcolor' id='formServicioRemoteApps-footer-bgcolor' role="form" method='post' enctype="multipart/form-data" action='' accept-charset='utf-8'>
            <!-- Seccion para personalizar los colores del footer -->
            <div class="form-group seccion-footer-bgcolor">
                <label>
                    Color del fondo: <button>poner picker color</button>
                </label><br>
                <label>
                    Color del fondo: <button>poner picker color</button>
                </label>
                <div class="form-group clearfix">
                    <div class="pull-right">
                        <input type="hidden" id="tokenForm_imagenes" name="tokenForm" value="<?php echo $this->tokenForm; ?>">
                        <input type="hidden" id="idSite_imagenes" name="idSite" value="<?php echo $this->infoSite_mysql[0]->id ?>">
                        <button type="submit" class="btn btn-primary"><?php echo $this->traduccion['boton_aceptar']; ?></button>
                    </div>
                </div> 
            </div>
        </form>

Solution

Try looking into farbtastic

after getting the javascript and css file, its this easy to implement.

<script type="text/javascript" src="/js/farbtastic.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //alert(1);
        debugger;
        $('#colorpicker').farbtastic('#id');

    });
</script>

 <input type='TextBox' ID="_tbColor"value="#123456"/>
    <div id="colorpicker"></div>