palette Extractor de Paleta de Colores de Imagen star

Por Qué No Basta con Contar Píxeles

La forma obvia de encontrar los colores dominantes de una foto suena simple: contar cuántos píxeles tienen exactamente cada color y quedarse con los que aparecen más veces. En la práctica esto falla casi de inmediato. Una foto digital de un cielo azul, por ejemplo, no es un único azul uniforme — son miles de azules sutilmente distintos, que cambian píxel a píxel debido al ruido del sensor, los gradientes de luz natural y los artefactos de compresión JPEG. Dos píxeles de cielo adyacentes podrían ser rgb(91, 148, 214) y rgb(92, 149, 213): visualmente idénticos, numéricamente distintos. Contados como valores exactos, ninguno es "el color más común" — cada uno podría aparecer solo una o dos veces, sepultado entre miles de otros azules casi idénticos pero técnicamente diferentes. El enfoque ingenuo devuelve ruido, no una paleta.

La solución es dejar de contar valores exactos de píxel y empezar a contar cubos (buckets) de colores similares. Esta herramienta divide cada uno de los canales rojo, verde y azul — que normalmente van de 0 a 255 — en 8 bandas iguales de 32 valores, aplicando Math.floor(valor / 32) * 32 a cada canal. Eso convierte 16,7 millones de combinaciones RGB posibles en una cuadrícula manejable de 8 × 8 × 8 = 512 cubos. Cada píxel de la imagen redimensionada cae exactamente en un cubo según la banda en la que se sitúen sus valores de rojo, verde y azul, y se mantiene un recuento continuo — usando un objeto simple como mapa hash — de cuántos píxeles caen en cada uno, además de una suma continua de sus valores reales de rojo, verde y azul.

De los Cubos a la Paleta

Una vez contados todos los píxeles, los cubos se ordenan por población y se conservan los 6 a 8 más poblados. Pero el color mostrado para cada cubo no es simplemente su límite numérico (por ejemplo, "224-255 rojo, 128-159 verde, 0-31 azul") — eso sería solo una esquina bastante arbitraria de un cubo de 32×32×32. En su lugar, esta herramienta calcula el promedio real de rojo, verde y azul de cada píxel que realmente cayó dentro de ese cubo, lo cual se acerca mucho más a lo que el ojo percibe como el color representativo de esa región de la imagen.

Este enfoque de agrupación por histograma es una forma deliberadamente simple de cuantización de color — reducir un conjunto grande de colores a un conjunto pequeño y representativo. Una alternativa clásica más sofisticada es el corte mediano (median-cut), definido por Paul Heckbert en su tesis de maestría de 1980 en el MIT, que divide recursivamente el espacio de color a lo largo de su dimensión más ancha en lugar de usar cajas de tamaño fijo; sigue siendo la técnica detrás de cómo las imágenes GIF se reducen a una paleta de 256 colores. El corte mediano generalmente produce paletas perceptualmente más precisas para imágenes complejas, a costa de una mayor complejidad de implementación. La agrupación por histograma de cuadrícula fija, usada aquí, es más fácil de razonar y suficientemente rápida como para ejecutarse al instante en el navegador, que es el equilibrio que elige esta herramienta.

Antes de que comience cualquier conteo, la imagen subida se reduce primero para que su ancho no supere los 200 píxeles, usando la API de canvas de HTML5. Esto reduce en gran medida los píxeles que hay que leer y agrupar, y apenas afecta a la paleta resultante, ya que los cubos de color siguen regiones amplias de matiz, no detalles finos. Todo el proceso — dibujar la imagen, redimensionarla, leer los datos de píxel con getImageData() y calcular los promedios de cada cubo — ocurre localmente en la memoria del navegador. La foto nunca se sube a ningún servidor.