Convertir cualquier DIV en una paleta de colores con jQuery

jQuery.Swatches es un sencillo plugin desarrollado con jQuery para convertir cualquier DIV en una paleta de colores simplemente realizando una llamada al plugin.

Este pequeño proyecto utiliza las etiquetas HTML data para recoger la información necesaria para crear la paleta. Las etiquetas utilizadas son dos: data-name y data-colors.

• Data-name. Esta etiqueta la utilizamos para definir el nombre de la paleta que creamos.
• Data-colors. La utilizamos para listar los códigos de colores que componente la paleta.

Ejemplo de uso:

HTML:

<div data-name="Buried at the Beach" 
   data-colors="#886655,#DD9977,#EECCAA,#EEEEEE,#CC99CC"></div>

JavaScript:

$('.swatch').swatchify();

También existe a posibilidad utilizar jQuery y arrays para crear las paletas de forma dinámica, por ejemplo podemos escribir:

// Asumimos que existe <div id="test-swatch" data-name="Test"></div>
var arr = ['#F35C9F','#F3F3F3'];
var test = $('#test-swatch');
test.data('colors', arr);
$('.swatch').swatchify();

jQuery.Swatches es un plugin liberado bajo licencia MIT.

Web: jQuery.Swatches