Respuesta directa
La extracción de paletas de color analiza la distribución de píxeles RGB en una imagen mediante algoritmos de cuantización espacial (Median Cut), aislando los centroides cromáticos dominantes y exportando tokens en formatos HEX, RGB y HSL.
Cómo usar esta herramienta
Carga una imagen fotográfica o diseño
Arrastra un archivo de imagen (PNG, JPEG, WebP) al visor de extracción.
Selecciona el número de colores deseados
Elige la cantidad de muestras de la paleta (entre 5 y 8 colores dominantes) y activa el filtrado de transparencias.
Inspecciona y exporta los tokens de color
Consulta las muestras ordenadas por frecuencia y cópialas como variables CSS, tokens JSON o paletas para Tailwind CSS.
Cómo funciona la cuantización cromática por corte medio (Median Cut)
El algoritmo Median Cut agrupa todos los píxeles de la imagen dentro de una caja tridimensional en el espacio de color RGB. Localiza de forma recursiva el eje con mayor dispersión de color, ordena los píxeles y divide la caja por la mediana hasta alcanzar el número de muestras fijado.
- Filtrado de canal alfa: Se descartan los píxeles totalmente transparentes o de baja opacidad para no distorsionar la paleta.
- Promedio de centroides: Cada grupo calcula la media ponderada de sus píxeles para obtener un tono representativo fiel.
- Exportación directa como variables: Las muestras se formatean automáticamente como propiedades personalizadas de CSS (--color-palette-1 a --color-palette-N).
Ejemplos prácticos
Extraer paleta de colores de una fotografía de paisaje
Entrada: Imagen: atardecer.jpg (1920x1080 píxeles, fotografía de montaña al ocaso)
Salida: Paleta extraída: 6 muestras — #1e293b (Azul noche), #f97316 (Naranja cálido), #fbbf24 (Ámbar), #0284c7 (Cielo), #cbd5e1 (Neblina), #475569 (Pizarra)
Obtiene una combinación de colores armónica lista para definir los tokens principales de una interfaz gráfica.
Limitaciones
- En imágenes con cientos de colores con luminosidad similar, detalles de resalte sutiles pueden quedar absorbidos en grupos cromáticos mayoritarios.
- Las fotografías de gran tamaño (más de 20 megapíxeles) se submuestrean en memoria para mantener una respuesta interactiva instantánea.
Preguntas frecuentes
¿Puedo copiar los colores obtenidos directamente como variables de CSS?
Sí. Con un solo clic puedes copiar la paleta completa en forma de variables personalizadas de CSS, valores HEX o estructuras JSON.
¿Se envían las imágenes cargadas a servidores externos para su análisis?
No. Toda la lectura de píxeles y los cálculos de cuantización cromática se realizan de forma privada en la memoria de tu navegador.
Referencias y normas autorizadas
- Manipulación de Píxeles con HTML5 Canvas en MDN Web Docs ↗ — Documentación técnica oficial sobre extracción directa de ImageData, acceso a búferes RGBA y procesamiento gráfico.