Extraer el color dominante de una imagen con jQuery

En determinadas situaciones puede resultar útil obtener el color dominante de una imagen, por ejemplo, si pensamos en una galería de imágenes podríamos necesitar adecuar el color de fondo de nuestro sitio según la imagen que nos encontremos visualizado.

Para obtener el color dominante de una imagen utilizando el framework jQuery podemos utilizar el plugin Adaptive Backgrounds, un plugin que se instala rápidamente y que nos permite obtener el código de color de una imagen con apenas unas lineas de código.

Obtener el color dominante de una imagen:

Primero necesitamos la imagen, el atributo data-adaptive-background indica que imágenes deben ser examinadas por el plugin:

<img src="/image.jpg" data-adaptive-background='1'>

Luego inicializamos el plugin:

$(document).ready(function(){
  $.adaptiveBackground.run()
});

Es muy fácil, verdad?

Además este magnifico plugin permite obtener la paleta de colores de una imagen:

$('img.my-image').on('ab-color-found', function(payload){
  console.log(payload.color);   // Color dominante
  console.log(payload.palette); // Paleta de colores
});

El plugin tiene un peso de 2.7kb aproximadamente, no es pesado y puede mejorar radicalmente la forma de mostrar imágenes en nuestro sitio.

Adaptive Backgrounds se encuentra liberado bajo licencia MIT.