Si necesitas saber el color de una imagen con código, la buena noticia es que no hace falta jQuery ni nada complicado: se puede hacer con JavaScript puro, en unas pocas líneas, usando Color Thief, una librería gratuita y de código abierto de Lokesh Dhakar. Te explico cómo funciona, cómo se usa y cuándo te conviene más una alternativa nativa con Canvas.
Qué es Color Thief y qué puedes hacer con él
Color Thief es una librería en JavaScript que analiza una imagen y te devuelve, en formato RGB, el color dominante o una paleta de varios colores representativos. Funciona tanto en el navegador como en Node, y pese a que en este blog está clasificada bajo jQuery por su categoría, no depende de jQuery en absoluto: es JavaScript puro que se apoya internamente en el elemento Canvas del navegador.
Puedes probarla sin instalar nada en la demo oficial del proyecto, donde subes una imagen y ves al instante el color dominante y la paleta extraída.
Cómo obtener el color dominante y la paleta
Una vez cargada la librería, crear una instancia y llamar a sus dos métodos principales es lo único que necesitas:
var colorThief = new ColorThief();var colorDominante = colorThief.getColor(imagen);var paleta = colorThief.getPalette(imagen, 8);
getColor(imagen) devuelve un array [r, g, b] con el color dominante. getPalette(imagen, 8) hace lo mismo pero te devuelve un array de 8 colores (el número es configurable), útil cuando un solo color no representa bien la imagen. El único requisito técnico es que la imagen esté completamente cargada antes de llamar a estos métodos (usa el evento load de la imagen o, si ya está en caché, comprueba img.complete), y que si la imagen viene de otro dominio, el servidor permita CORS — si no, el navegador bloquea la lectura de los píxeles por seguridad.
Casos de uso reales
Esto deja de ser un ejercicio de código en cuanto le encuentras una aplicación concreta. Las que más veo en proyectos reales:
- Temas visuales dinámicos: una galería o una ficha de producto que adapta el color de fondo o de los acentos al color dominante de la imagen destacada, en vez de un color fijo para todas.
- Moodboards y paletas de inspiración: generar automáticamente la paleta de una foto de referencia para arrancar un proyecto de diseño sin tener que elegir los colores a ojo.
- Comprobaciones de accesibilidad: obtener el color de fondo real de una imagen para calcular el contraste con el texto que se superpone, antes de dar por buena una combinación.
- Miniaturas con color de carga (placeholder): mostrar un color sólido del tono dominante mientras la imagen a tamaño completo termina de cargar, una técnica habitual en webs de fotografía.
Alternativa: Canvas API nativo
Si no quieres depender de ninguna librería externa, puedes llegar al mismo resultado con la Canvas API nativa del navegador: dibujas la imagen en un <canvas> oculto, lees sus píxeles con getImageData() y calculas tú mismo el color medio o dominante recorriendo el array de valores RGB. Es exactamente lo que Color Thief hace por dentro, así que optar por la versión nativa tiene sentido cuando quieres cero dependencias y control total sobre el algoritmo (por ejemplo, para ponderar unos píxeles más que otros), a cambio de escribir y mantener más código tú misma.
| Opción | Cuándo usarla |
|---|---|
| Color Thief | Quieres resultado ya, en 3 líneas, con una API probada y mantenida |
| Canvas API nativo | Quieres cero dependencias externas o control fino sobre el algoritmo |
Más trucos de desarrollo web como este
Apúntate a la newsletter y te aviso cuando publique nuevos tutoriales y recursos de desarrollo web.
Preguntas frecuentes
¿Cómo saber el color de una imagen sin programar?
Si no quieres tocar código, la demo de Color Thief te lo da subiendo la imagen directamente. Si además quieres generar paletas completas de forma visual, tienes más opciones en mi guía de generadores de paletas de colores online.
¿Necesito jQuery para usar Color Thief?
No. Es JavaScript puro. Puedes cargarlo en cualquier proyecto sin añadir jQuery como dependencia.
¿Cómo obtener la paleta de colores de una imagen, no solo un color?
Usa getPalette(imagen, n) en lugar de getColor(imagen), indicando en n cuántos colores quieres extraer.
¿Funciona con imágenes de otros dominios?
Solo si ese dominio permite CORS para esa imagen. Si no, el navegador bloquea la lectura de píxeles por seguridad y el método falla.
¿Es lo mismo que un generador de paletas online?
El resultado final puede parecerse, pero aquí extraes el color directamente de una imagen mediante código, mientras que un generador online lo hace por ti desde una interfaz visual, sin escribir nada.
Con esto ya tienes lo necesario para sacarle el color o la paleta a cualquier imagen desde tu propio código. Si el proyecto no necesita programación, échale un vistazo a mi guía de generadores de paletas de colores para llegar al mismo resultado sin escribir una línea.
