Extractor de Paleta de Colores de Imagen

Extractor de Paleta de Colores de Imagen

Sube una imagen y extrae sus colores dominantes al instante. La herramienta lee cada píxel, ejecuta cuantización de corte mediano para agrupar colores similares y devuelve una paleta ordenada con códigos hex, valores RGB y porcentajes. Todo el procesamiento ocurre en tu navegador.

¿Qué es un extractor de paleta de colores?

Un extractor de paleta de colores analiza una imagen e identifica sus colores dominantes, devolviendo una lista ordenada de muestras con sus códigos hex, valores RGB y el porcentaje de píxeles que representa cada color. Esto es útil para coincidir colores de marca desde un logo, crear temas de diseño coherentes a partir de fotografías, construir sistemas de color UI desde imágenes de referencia y garantizar la accesibilidad. El algoritmo más común es la cuantización de corte mediano, que agrupa píxeles similares en el espacio de color 3D y promedia cada grupo.

Cómo usarlo

1. Arrastra y suelta una imagen o haz clic para subir (PNG, JPEG, WebP, GIF, BMP o SVG)
2. Ajusta el control deslizante de cantidad de colores (2-16 colores)
3. Haz clic en Copiar junto a cualquier muestra para copiar su código hex
4. Exporta la paleta completa como variables CSS o JSON

Cómo funciona la cuantización de corte mediano

El color de cada píxel es un punto en el espacio 3D donde rojo, verde y azul son los ejes. Una imagen de 800x800 produce 640,000 puntos. El corte mediano construye un cuadro delimitador alrededor de todos estos puntos y lo divide en la mediana a lo largo del eje más largo, creando dos cuadros más pequeños. Cada cuadro se divide recursivamente hasta alcanzar el número objetivo de cuadros. Los píxeles de cada cuadro se promedian para producir un solo color de muestra.

Este enfoque preserva mejor el contraste de color que el simple clustering. La división en la mediana asegura que cada cuadro contenga aproximadamente el mismo número de píxeles, por lo que la paleta representa la distribución de color real de la imagen.

La herramienta filtra píxeles transparentes (alfa < 25), casi negros (promedio < 15) y casi blancos (promedio > 240) antes de la cuantización.

Cuándo usar diferentes cantidades de colores

2-4 colores producen paletas planas y posterizadas. Úsalas para extracción mínima de colores de logo o paletas de marca simplificadas.

6-8 colores dan una representación equilibrada de la mayoría de las imágenes. Las fotografías con iluminación natural, paisajes y fotos de productos funcionan bien en este rango.

10-16 colores capturan cambios sutiles de tono en degradados, atardeceres, texturas de tela y otras imágenes con amplio rango tonal.

Uso en flujos de trabajo CSS y diseño

La exportación CSS produce variables nombradas que mapean a cada muestra. Ejemplo de salida para una paleta de 8 colores:

:root {
  --color-palette-1: #1a365d;
  --color-palette-2: #2b6cb0;
  --color-palette-3: #63b3ed;
  --color-palette-4: #bee3f8;
}

La exportación JSON devuelve datos estructurados con hex, RGB y porcentaje. Útil para tokens de diseño en sistemas de compilación.

Herramientas relacionadas

¿Necesitas convertir un solo color entre formatos? Usa el Conversor de Color. Genera degradados CSS con tu paleta con el Generador de Degradados CSS. Verifica el contraste de accesibilidad antes de usar colores extraídos con el Verificador de Contraste WCAG.