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

Bootstrap Colorpicker es un widget GUI que se suele utilizar para que el usuario puedas escoger un color dentro de una paleta de colores. Como sospecharás, es un plugin de jQuery basado en Bootstrap. Mediante este plugin, asociaremos un elemento HTML para mostrar el color picker. Podremos implementar de forma sencilla en nuestra aplicación utilizando la librería Bootstrap. De este forma, el usuario podrá escoger un color dentro de una paleta de colores en lugar de tener que buscar el código hexadecimal de un color concreto.

En este ejemplo utilizaremos un botón HTML para ejecutar nuestro color picker. Al hacer clic en dicho botón, mostraremos la paleta de colores al usaurio. Utilizaremos el color picker de Bootstrap para cambiar el color de fondo de un DIV dinámicamente.

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>