Cómo obtener paletas de colores a partir de una imagen

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

Color-Thief

El siguiente script gratuito Color Thief, nos permite obtener el color predominante de una imagen y también la paleta de colores o colores secundarios de la misma. Simplemente haciendo uso de la tecnología JavaScript y el tag Canvas.

Existen muchos casos en los que este script nos podría ser tremendamente útil, por ejemplo:

  • Buscador por color: al poder ser ejecutado por el cliente como por el servidor, nos puede ser útil para guardar la información de una imagen, por ejemplo en una base de datos. Ideal para crear un buscador de imágenes de stock y tener todas las imágenes categorizadas por colores.
  • Interfaces de usuario: en definitiva cualquier interfaz web. Por ejemplo una página de fondos de pantalla, categorizar fotografías en una web, crear galerías de fotografías a partir de su paleta de colores, crear un listado de productos a partir de sus colores…

Para comenzar a utilizarlo basta con incluir los ficheros: jquery, quantize.js y color-thief.js en tu página y utilizar el script de la siguiente forma:

myImage = $('#myImage'); 
dominantColor = getDominantColor(myImage); 
paletteArray = createPalette(myImage, 10); 
// 2nd argument sets # of colors in palette

Sé la primera persona en comentar

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.