Extractor de Colores Dominantes

Acerca del Extractor de Colores Dominantes

El Extractor de Colores Dominantes analiza la imagen subida y devuelve los colores más predominantes como una paleta compacta, ordenada según la superficie que ocupa cada uno. El algoritmo primero muestrea la imagen a baja resolución para que la extracción sea rápida incluso con fotos de varios megapíxeles, y a continuación aplica la cuantización median-cut sobre los píxeles muestreados: la nube de color se divide recursivamente por su eje más extenso, produciendo cajas con número similar de píxeles cuyas medias se convierten en las entradas de la paleta. Cada color devuelto se reporta con su código HEX, su tripleta RGB y el porcentaje de píxeles muestreados que le corresponden, así verás de un vistazo qué color manda en la imagen. La salida se exporta en cuatro formatos pensados para desarrollo: HEX y RGB separados por línea, variables CSS listas para pegar y un array JSON. Todo se ejecuta en el navegador con la API Canvas; ninguna imagen se sube a un servidor.

¿Qué significa realmente el "color dominante" de una imagen?

El color dominante es el que ocupa el área visible más grande de la imagen una vez que se agrupan los tonos ligeramente distintos. Una foto del cielo no contiene un solo azul: tiene cientos de azules ligeramente diferentes. La cuantización resuelve esto fusionando tonos visualmente parecidos en uno representativo y el grupo con más píxeles es el color dominante. Esto es distinto del color medio (una media por canal que suele acabar en un gris-beige insulso) y del color más saturado (genial para acentos, pero rara vez resume bien la imagen completa). Este extractor pone primero el dominante en las muestras y ordena el resto por cobertura descendente.

¿Por qué median-cut en lugar de k-means?

Median cut es un algoritmo determinista y de una sola pasada introducido por Paul Heckbert en 1982 para convertir imágenes de 24 a 8 bits indexados. Construye la paleta dividiendo recursivamente el cubo de color por su eje más largo en la mediana, por lo que cada color de la paleta tiene aproximadamente la misma cantidad de píxeles detrás. K-means puede producir paletas algo más fieles en fotos con distribuciones bimodales fuertes, pero requiere múltiples iteraciones, semillas aleatorias y a veces queda atrapado en mínimos locales. Median cut corre en tiempo prácticamente lineal, da el mismo resultado para la misma entrada y coincide con el algoritmo que usan los navegadores al codificar GIF, así que los colores elegidos sobreviven bien al guardar la imagen como formato cuantizado. Para la mayoría de usos de tema y extracción de UI, ambos algoritmos son visualmente indistinguibles.

¿Por qué el color dominante sale desvaído frente a lo que veo en la imagen?

Hay dos efectos combinados. Primero, median-cut promedia los píxeles dentro de cada caja de paleta; si tu camiseta roja vívida está rodeada de rojos más oscuros en las sombras, la media diluye el tono. Segundo, el sistema visual humano da peso desproporcionado a las zonas más saturadas, por lo que un logo rojo brillante sobre un fondo beige se siente como el color principal aunque ocupe menos área. Para obtener una paleta más vívida, baja el número de colores solicitados (el algoritmo gastará su presupuesto en las regiones más saturadas), activa Ignorar casi blanco (elimina fondos blancos que diluyen la media) o recorta la imagen para enfocarte en el sujeto saturado. Para extraer colores de marca, recortar al logo antes de extraer es un truco fiable.

¿Cómo uso la paleta en CSS o Tailwind?

La herramienta ya produce un bloque de variables CSS del tipo `--color-1: #RRGGBB;`. Pega eso en tu selector :root y usa cada color con `var(--color-1)`. Para Tailwind, copia la lista HEX y pégala en tailwind.config.js dentro de theme.extend.colors con nombres descriptivos: `primary: '#1a73e8'`, `accent: '#fbbc04'`, etc. La salida JSON también está pensada para alimentar scripts de build: cada entrada lleva hex, rgb y count, así puedes ordenar y filtrar por código. Si quieres una escala clara-oscura perfectamente espaciada de uno de los colores extraídos, pásalo por nuestro Generador de Tonos de Color para conseguir una paleta estilo Material 50-900.

¿Por qué se omiten píxeles con alfa por debajo de 128?

Los píxeles con alfa baja son casi transparentes y apenas contribuirían a la imagen al renderizarse sobre cualquier fondo. Incluirlos haría que zonas transparentes grandes en PNG (sobre todo logos y stickers) contaminen la paleta con el fantasma del fondo que existía cuando se calculó el alfa. El umbral 128 (medio transparente o más opaco) es una elección conservadora: preserva los bordes anti-alias de figuras sólidas (que sí llevan el color real del sujeto) y excluye halos muy transparentes. Si necesitas extraer colores de una región opaca pequeña sobre fondo transparente, el algoritmo sigue funcionando bien: basta con que haya unos cuantos cientos de píxeles opacos.

¿Se sube la imagen a un servidor?

No. La imagen se lee con FileReader, se dibuja en un Canvas fuera de pantalla y se analiza íntegramente en tu pestaña del navegador. No se realiza ninguna petición de red con datos de imagen; puedes comprobarlo abriendo la pestaña Network de DevTools. Esto hace la herramienta segura para diseños confidenciales, fotos de clientes, capturas de UI no publicada y otras imágenes sensibles. También significa que funciona sin conexión una vez cacheada la página. Lo único que viaja por la red son los assets de la propia página, nunca tu imagen.