Cómo cambiar el color de fondo de un div mediante Bootstrap Colorpicker

 

 

Código HTML para mostrar el color picker

Este código HTML contiene un elemento DIV y un botón. Como he dicho antes, utilizaremos el botón para mostrar el color picker. Por ello, debemos asociar las funciones para mostrar el color picker con el evento clic del botón. Al seleccionar el botón, modificaremos el color de fondo de nuestro elemento DIV.
Entonces, lo primero que tenemos que hacer es descargar la librería Colorpicker para Bootstrap e incluir las dependencias CSS y Javascript necesarias en tu HTML.

<link rel="stylesheet" href="bootstrap-colorpicker.min.css">
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-colorpicker.js"></script>
<div class="row">
    <div id="div-bg"></div>
    <button id="btn-color-picker" class="btn btn-primary btn-md">
        <img src="ic_color_lens.png" />
    </button>
</div>

Y los estilos son:

<style>
#div-bg {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    display: inline-block;
    box-sizing: border-box;
}
#btn-color-picker {
    background: none;
    border: #000 1px solid;
    padding: 2px;
    cursor: pointer;
}
</style>

Cambiar el color de fondo del DIV utilizando Bootstrap Colorpicker

En este sencillo script, inicializaremos la función que se encarga de inicializar el color picker pasándole como parámetro el ID del botón. El botón que se encargará de ejecutar el color picker contendrá un botón con un icono. Al hacer clic en el botón, se mostrará la paleta de colores al usuario. Cuando el usuario seleccione un color, cambiaremos el color de fondo del div utilizando la función de jQuery css().

<script type="text/javascript"
        $('#btn-color-picker').colorpicker();
        $('#btn-color-picker').colorpicker().on(
                        'changeColor',
                        function() {
                                $('#div-bg').css('background-color',
                                                $(this).colorpicker('getValue', '#ffffff'));
                        });</script>