Extraer los colores dominantes de una imagen

El extractor acepta las imágenes bitmap clásicas de la web: JPG, JPEG, PNG, GIF y WebP. Las imágenes vectoriales (SVG) no son pertinentes para este tratamiento, dado que ya describen sus colores en el código. Para un fichero SVG, ábralo en un editor de texto y lea directamente los valores HEX presentes en los atributos fill y stroke.

Los ficheros de hasta unos 10 MB se procesan sin dificultad. Por encima, el tratamiento sigue siendo posible pero se ralentiza notablemente. Para acelerar la extracción de una foto de muy alta resolución, redimensiónela a unos 1500 px de ancho: la paleta dominante sigue siendo idéntica y el análisis es mucho más rápido.

Un color picker devuelve el color de un píxel concreto seleccionado con el ratón. El extractor de paleta analiza el conjunto de la imagen, agrupa los píxeles visualmente cercanos por clustering y, después, devuelve los n colores dominantes. El picker es útil para señalar un detalle, el extractor para entender la atmósfera cromática global de una foto.

La herramienta utiliza un clustering tipo k-means en el espacio RGB: cada píxel se aproxima al centro de clase más cercano y, después, los centros se recalculan en cada iteración hasta su estabilización. El resultado es una lista de colores representativos, expresados en HEX, que resumen la imagen sin ruido.

La imagen se envía al servidor durante el tiempo del análisis píxel a píxel y, después, se destruye inmediatamente tras la extracción de la paleta. Ningún fichero se conserva en disco. Los metadatos EXIF (geolocalización, modelo de cámara) no se explotan y desaparecen con el fichero original.

Los usos son numerosos: ajustar una carta gráfica sobre una foto de producto, recolorear un sitio de venta para que combine con la atmósfera de una imagen hero, alimentar un tema oscuro a partir de una obra, o generar tokens de diseño en un fichero CSS, SASS o Tailwind. La paleta obtenida puede afinarse después en el generador de paleta o convertirse con el convertidor de color.