Qué significa de verdad “extraer los colores de una imagen”
Una fotografía casi nunca contiene cinco colores; contiene cientos de miles ligeramente distintos. Un generador de paletas, por tanto, no encuentra colores que estén literalmente ahí: resume una nube enorme de píxeles en unos pocos colores representativos, y lo interesante es cómo decide cuáles. Esta herramienta lo hace con agrupación k-means en el espacio de color CIELAB, y entender qué significa eso te ayuda a leer el resultado y a elegir buenos ajustes.
Paso a paso: qué ocurre cuando sueltas una foto
- Decodificar y reducir. El navegador decodifica la imagen y la escala a 512 px como máximo en su lado largo. Una miniatura tiene los mismos colores que la foto completa y así el análisis es rápido incluso en un móvil.
- Descartar transparencias. Con “ignorar píxeles transparentes” activado (por defecto), los píxeles con alfa por debajo de la mitad se eliminan antes que nada, de modo que un logo en un PNG transparente se analiza como un logo y no como un logo más una muestra fantasma negra o blanca de relleno.
- Convertir a CIELAB. Cada píxel restante pasa de sRGB a CIELAB, un espacio diseñado para que la distancia en línea recta se aproxime a lo distintos que se ven dos colores. Un rojo oscuro y un verde oscuro pueden estar numéricamente cerca en RGB; en Lab están lejos, que es lo que la agrupación debe “sentir”.
- Sembrar e iterar. Los centros de los grupos se colocan con la siembra k-means++: cada nuevo centro se elige con probabilidad proporcional al cuadrado de su distancia a los ya elegidos, así que las semillas se reparten entre los colores presentes en lugar de amontonarse en la región mayor. Después las iteraciones de Lloyd asignan cada píxel a su centro más cercano y mueven cada centro a la media de sus píxeles hasta que dejan de moverse.
- Leer la paleta. Cada centro final es una muestra —la media de los píxeles asignados— y el porcentaje que aparece debajo es la fracción de píxeles contados que cayó en ese grupo.
Las elecciones aleatorias salen de un generador pseudoaleatorio con semilla fija, así que el proceso es determinista: la misma imagen con los mismos ajustes da siempre la misma paleta.
Por qué contar píxeles engaña sobre los “colores dominantes”
La forma ingenua de medir dominancia es un histograma: trocear RGB en una rejilla gruesa, contar píxeles por celda e informar de las celdas más llenas. Es rápido, pero responde a la pregunta equivocada. Un fondo grande y plano —una pared, un cielo, un fondo de estudio— se reparte entre varias celdas vecinas y puede quedarse con tres o cuatro de tus cinco huecos con tonos casi idénticos, mientras que un motivo pequeño y vivo (una taza roja, un chubasquero amarillo) nunca llena una celda lo bastante como para aparecer. Los cuantizadores median-cut y octree, los métodos clásicos de la era del GIF, comparten una forma más suave del mismo sesgo porque dividen cajas por número de píxeles en RGB.
k-means en Lab no es inmune al área —una foto que es en un 70 % pared gris seguirá dando una paleta cargada de grises—, pero funde los tonos casi idénticos en un solo centro y libera los huecos restantes para los colores perceptualmente distintos. Por eso el ejemplo “Foto de producto sobre blanco” devuelve los colores del producto con un único blanco, y por eso merece la pena leer la columna de porcentaje: un color al 2 % puede ser el acento sobre el que debe girar todo tu esquema. Si el acento es aún más pequeño, usa el cuentagotas: un clic en la vista previa añade ese píxel exacto como muestra manual, sin promediar nada.
Elegir el número de colores, y qué hace “Auto”
No existe un tamaño de paleta matemáticamente correcto, solo el que conviene al trabajo. En Auto, la herramienta ejecuta un ajuste rápido de k-means para varias cantidades candidatas entre 2 y 12, registra para cada una lo apretados que quedan los píxeles alrededor de sus centros (la suma de cuadrados intragrupo) y elige la cantidad en el codo de esa curva: el punto a partir del cual añadir otro color deja de aportar fidelidad. Es una heurística, no un oráculo: tiende a sugerir pocos colores para gráficos planos y más para fotografías, y puedes cambiarla con un clic.
| Objetivo | Cantidad sugerida | Ordenar por |
|---|
| Esquema de marca o interfaz a partir de una foto principal | 4–6 | Dominancia |
| Moodboard / presentación | 6–8 | Tono |
| Paleta reducida para pixel art o un patrón de manualidades | 10–16 | Luminosidad |
| Comprobar qué usa realmente un logo | Auto | Dominancia |
HEX, RGB, HSL y Lab: ¿cuál necesitas?
Cada notación sirve en un sitio distinto. HEX es la lengua franca de CSS, Figma, Sketch y los sistemas de diseño. RGB es lo que quieren canvas, WebGL y la mayoría de las API. HSL es para editar: un tinte más claro o un estado hover más apagado es un solo cambio en L o S mientras el tono se queda quieto, mientras que en RGB se mueven los tres canales. Lab es donde se hizo la agrupación y el espacio adecuado para razonar sobre lo distintos que se ven dos colores: el color CSS con nombre más cercano es simplemente la menor distancia en línea recta (ΔE) en Lab. Ordenar por tono recorre el círculo cromático (los grises se envían al final para que siga siendo legible); ordenar por luminosidad usa el valor L de Lab, de claro a oscuro.
Transparencia y PNG
Las zonas transparentes no tienen color con sentido, y cómo las trata una herramienta cambia la paleta. Aquí se excluyen antes de agrupar cuando el interruptor está activado, y los porcentajes se calculan solo sobre los píxeles opacos. Desactívalo si la transparencia es en sí significativa —una pegatina cuya sombra semitransparente quieres representar— y ten en cuenta que una imagen totalmente transparente devuelve una paleta vacía en lugar de una inventada.
Usar la paleta en CSS, Tailwind, Figma y GIMP
- CSS / SCSS: la exportación escribe propiedades personalizadas --palette-1: #…; dentro de :root (o variables SCSS $palette-1), cada una con el nombre más cercano y el porcentaje como comentario, así que el archivo se documenta solo.
- Tailwind: el fragmento es un objeto theme.extend.colors con claves 100/200/300…, listo para pegar en tailwind.config.js; en Tailwind v4 los mismos valores pasan a ser líneas --color-palette-100 dentro de un bloque @theme.
- Figma, Sketch, Canva: copia los HEX uno a uno, o copia la exportación en texto plano y pégala en un documento de estilos.
- GIMP, Inkscape, Krita, Aseprite: descarga el archivo .gpl. Es el formato de paleta en texto plano de GIMP (una cabecera GIMP Palette, un nombre y una fila R G B nombre por color) y esos programas lo importan directamente en su diálogo de paletas.
Accesibilidad: cómo leer las pistas de contraste
La etiqueta de cada muestra es negra o blanca, la que dé mayor ratio de contraste WCAG 2.1 contra ese color según la fórmula estándar de luminancia relativa. Es una pequeña comprobación integrada, no una auditoría completa: WCAG pide 4,5:1 para texto normal y 3:1 para texto grande y componentes de interfaz, y la etiqueta solo te dice cuál de los dos fallaría antes. Úsala para clasificar los colores extraídos en “puede llevar texto” y “solo fondo”.
Cuándo NO usar esta herramienta
k-means te da medias representativas. Si necesitas el HEX exacto de marca de un logo plano, usa el cuentagotas o fija la cantidad al número de colores planos; una fotografía de un logo impreso nunca devolverá el valor de la especificación porque la iluminación y la compresión JPEG ya lo han cambiado. Los degradados suaves se resumen en unas pocas bandas: correcto para un esquema, incorrecto si querías el degradado en sí. Y esto no es un simulador de daltonismo ni un verificador de contraste completo.
Trabajar con el resto de herramientas de foto a arte
El motor de paletas de aquí es el que hay detrás de nuestro generador de pixel art, el generador de pintar por números y el generador de páginas para colorear, dentro de la categoría De Foto a Arte. Extrae primero una paleta para ver cuántos colores distintos contiene de verdad una foto y luego pasa la misma imagen por la herramienta de patrones con una cantidad equivalente.
