Extractor de paleta de colores

¿Qué es un extractor de paleta de una imagen?#

Cada imagen lleva un pequeño conjunto de colores que hacen la mayor parte del trabajo: el azul de marca de un logo, los neutros cálidos de una foto de producto, la paleta bicolor de una ilustración. Un extractor de paleta saca esos colores representativos automáticamente para que puedas reutilizarlos: construir un tema de interfaz que combine, elegir un color de botón que no chirríe, generar variables CSS o simplemente entender qué muestras dominan de verdad una imagen frente a las que tu ojo asume importantes.

Esta página ejecuta una cuantización de colores por median-cut totalmente en tu navegador. Cargas una imagen, se reduce a un tamaño de muestra manejable, se lee cada píxel y el algoritmo divide repetidamente el espacio de color a lo largo de su canal más ancho hasta tener las N muestras que pediste (2–16). Obtienes cada color como una muestra con su porción de la imagen, más el color medio directo, exportable como lista HEX, archivo de variables CSS o JSON estructurado.

Cómo se usa#

1. Arrastra una imagen a la zona de arrastre punteada (o haz clic en ella para elegir un archivo). PNG, JPEG y WebP funcionan; los PNG transparentes se manejan correctamente porque los píxeles transparentes se saltan antes de contar.
2. Arrastra el control Número de colores (2–16) para elegir cuántos colores representativos extraer. Seis es un buen valor por defecto para una paleta equilibrada; dos o tres aíslan la pareja dominante.
3. Lee la lista de muestras a la derecha: cada fila muestra el color, sus valores HEX/RGB/HSL y el porcentaje de píxeles muestreados que cayeron en ese cubo, ordenados de más dominante a menos. Haz clic en cualquier valor para copiarlo.
4. Consulta la tarjeta Color promedio en la barra lateral para la media directa de cada píxel: útil cuando quieres un tono de fondo global en vez de una paleta ordenada.
5. Elige un Formato de paleta:
   • Lista HEX (.txt) — un #RRGGBB por línea, el dominante primero. Pégalo directo en una herramienta de diseño.
   • Variables CSS (.css) — un bloque :root { --palette-1: …; …; --palette-avg: …; } que puedes soltar en una hoja de estilos.
   • JSON (.json) — muestras estructuradas con hex, rgb, count y share, más el color medio y los metadatos de muestreo.
6. Haz clic en Descargar paleta para guardar el archivo.

Características clave#

• Cuantización median-cut, de autoría propia. La misma familia de algoritmos que usan las herramientas profesionales de imagen, ejecutada en tu pestaña: división por el canal más ancho en la mediana y repetición sobre la caja actualmente más ancha hasta alcanzar el recuento pedido.
• Números de proporción honestos. Cada muestra lleva la fracción real de píxeles muestreados que representa, así que «dominante» significa dominante por área, no por conjetura.
• Media separada del dominante. La media directa de píxeles se muestra junto a la paleta ordenada: dos preguntas diferentes respondidas en una sola pasada.
• Píxeles transparentes saltados. El alfa por debajo de un umbral pequeño se excluye, así que un PNG transparente informa de los colores que de verdad se dibujan, no de una mezcla turbia con la transparencia.
• Tres formas de exportación. Lista HEX para herramientas de diseño, variables CSS para una hoja de estilos, JSON para programas: todas generadas a partir de las mismas muestras exactas que ves.
• 100 % local. La imagen la decodifica y muestrea el navegador. No hay subida.

Ejemplo práctico#

Suelta un logo de marca que es un azul corporativo profundo sobre un fondo blanco con un pequeño acento; supongamos que el azul rellena un 60 % del canvas. Con Número de colores puesto en 4, una extracción típica se ve así:

#1D4ED8   58.4%   rgb(29, 78, 216)    hsl(224, 76%, 48%)
#FFFFFF   31.2%   rgb(255, 255, 255)  hsl(0, 0%, 100%)
#172554   7.1%    rgb(23, 37, 84)     hsl(224, 57%, 21%)
#93C5FD   3.3%    rgb(147, 197, 253)  hsl(217, 95%, 78%)

La muestra dominante es el azul de marca con un 58 %, con el blanco en segundo lugar. Fíjate en los dos azules adicionales, una tonalidad más oscura y un tinte más claro, que el algoritmo encontró porque cruzan un límite de mediana; son exactamente los colores que reutilizarías para estados hover y sombras. Exporta como Variables CSS y obtienes un tema listo para usar:

:root {
  --palette-1: #1D4ED8;
  --palette-2: #FFFFFF;
  --palette-3: #172554;
  --palette-4: #93C5FD;
  --palette-avg: #5A7BCB;
}

--palette-avg es la media directa de cada píxel: un azul medio amortiguado que funciona bien como fondo de página con un tinte hacia la marca.

Preguntas frecuentes#

Los porcentajes no suman exactamente el 100 %.#

Están redondeados para la visualización (los valores subyacentes son exactos a cuatro decimales en la exportación JSON). Una pequeña parte residual también proviene de que los píxeles transparentes se saltan antes de contar, así que el total refleja solo los píxeles opacos que de hecho se muestrearon.

Obtengo menos muestras de las que pedí.#

Median cut se detiene antes cuando cada caja de color restante es sólida (rango cero en todos los canales): de verdad no queda nada que dividir. Pedir 8 colores en una imagen de 3 colores devuelve 3, no 8 inventados.

¿Por qué el color medio es tan diferente del dominante?#

Responden a preguntas diferentes. El color dominante es el cubo único más frecuente; la media es la media aritmética de cada píxel, que unas pocas regiones grandes pero de color diferente pueden apartar del valor más frecuente. Una imagen mitad roja, mitad verde tiene una media parda pero ningún marrón dominante: ambos números son correctos.

¿Funciona con fotos o solo con gráficos planos?#

Ambos. Los gráficos planos dan muestras limpias y bien separadas; las fotos dan un conjunto más graduado porque los tonos reales abarcan muchos colores cercanos. Para una foto, sube el Número de colores a 8–12 para capturar la gama más rica.