Extractor de paletas de color & imagen

Extractor de paletas de color & imagen

Extraiga al instante paletas de color a partir de imágenes. Genere muestras dominantes en HEX, RGB y HSL, exporte tokens para CSS o Tailwind y verifique el contraste de accesibilidad WCAG.

Cargar ejemplo
Parámetros y entradas

Arrastre y suelte una imagen aquí

o haga clic para examinar archivos (PNG, JPG, WebP, SVG)

6
361216
14
01430
2.0x
1.0x2.0x3.5x
Resolución de muestreo:
Flujo de extracción cromáticaPaso 1: Cargar imagen46,080 pxPaso 2: CuantizaciónCIEDE2000Paso 3: Armonías12 boxes • k=6Paso 4: Exportación6 Swatches • ΔE=14
Resolución de imagen: 256×180px
Píxeles procesados: 46,080|Privacidad 100% en el cliente
42.5%
21%
16.5%
10.2%
#0D0E1542.5%
Base Canvas
#00F0FF21%
Primary Accent
#FF007F16.5%
Secondary Accent
#7928CA10.2%
Muted Surface
#FEE75C5.8%
Highlight Glow
#1F23384%
Card Border
Escala de tintes y sombras#00F0FF
50#EEFBFB
100#D8F6F8
200#A8EEF3
300#74EBF3
400#3CEBF7
500#00F0FF
600#00BBC9
700#008993
800#00565C
900#002426
Rol semántico: #00F0FF|Primary Accent
Contraste máximo: 15.4:1|Saturación dominante: 70%
Métrica principal46,080
Eficiencia / Capacidad70%
Rendimiento neto15.4:1
Colores extraídos6 / 6
Diferencia Delta E (ΔE)14
Resolución de imagen256×180px

Procesamiento en el cliente

Cálculo de alto rendimiento ejecutado íntegramente en la memoria del navegador.

Privacidad sin subidas al servidor

Todos los datos se procesan de forma estrictamente local, sin comunicación con servidores externos.

Exportación lista para producción

Formatos limpios y optimizados listos para su integración inmediata.

ToolsAA•Utilidades web 100% privadas en el cliente
Referencia técnica y guía de arquitectura

Extractor de Paletas de Color & Guía — Guía de referencia

Extrae paletas de color de cualquier imagen al instante. Genera muestras dominantes en HEX, RGB y HSL, exporta tokens para CSS o Tailwind y audita el contraste de accesibilidad WCAG.

Extractor de Paletas de Color & Guía — Guía de referencia — Arquitectura en memoria del lado del cliente y flujo de datos
Extractor de Paletas de Color & Guía — Guía de referencia — Arquitectura en memoria del lado del cliente y flujo de datos

Parámetros clave y controles

Cantidad de muestras dominantes (Tamaño de clúster k)Escala de paleta (3 a 16 muestras)

Cantidad objetivo de centroides de color discretos extraídos de la imagen. Para espacios habitables armoniosos, álbumes fotográficos y sistemas de diseño digital, de 5 a 7 colores logran el equilibrio estético óptimo entre fondo de lienzo, superficies de tarjetas, tono focal primario, acentos secundarios vibrantes y elementos de texto de alto contraste.

Por defecto: 6
Algoritmo de cuantización de color (Motor de extracción)Modelo de agrupamiento (Median Cut | K-Means | Saturation Boost)

Metodología matemática de agrupamiento utilizada para aislar los matices: Modified Median Cut subdivide recursivamente cajas delimitadoras RGB para capturar detalles de acento vívidos; K-Means agrupa píxeles mediante el centroide euclidiano más cercano en el espacio CIELAB para reflejar la prevalencia estadística real; Saturation Boost amplifica los píxeles saturados mediante ponderación exponencial (S^1.5) para evitar que las texturas de fondo apagadas eclipsen los colores vivos del motivo principal.

Por defecto: Median Cut
Umbral de diferencia de color perceptual (Delta-E ΔE*ab)Métrica de distancia CIELAB (4.0 a 30.0 ΔE)

Distancia perceptiva mínima requerida entre las muestras extraídas en el espacio de color uniforme CIELAB. Valores inferiores a 2.0 resultan prácticamente imperceptibles para el ojo humano, valores entre 5.0 y 12.0 definen tonos armónicos y claramente distinguibles, y cifras superiores a 15.0 previenen redundancias visuales garantizando una paleta nítida de alto contraste.

Por defecto: 12.0
Resolución de análisis por submuestreoDimensión de rejilla de muestreo (128px a 512px)

Dimensión máxima normalizada del lienzo de procesamiento utilizado para el análisis de píxeles. El submuestreo a 256px analiza 65.536 píxeles de muestra en menos de 16 milisegundos sin ralentizar el dispositivo ni agotar la batería, preservando la distribución cromática natural exacta y el equilibrio tonal de fotografías de alta resolución.

Por defecto: 256px
Umbral de corte de canal alfa (Transparencia)Umbral de canal alfa (0 a 255 niveles)

Límite de opacidad por debajo del cual los píxeles semitransparentes se descartan o se componen sobre un fondo neutro limpio. Establecer un corte alfa en 128 (50% de opacidad) evita que los bordes semitransparentes en archivos PNG, marcas de agua y sombras difuminadas contaminen la paleta con tonos negros artificiales (#000000) o grises opacos.

Por defecto: 128

Consejos profesionales y mejores prácticas

El agrupamiento perceptual CIELAB supera al RGB matemático

Las fórmulas de distancia euclidiana estándar en RGB (sqrt(ΔR² + ΔG² + ΔB²)) no se corresponden con la biología visual humana, ya que los conos retinianos son considerablemente más sensibles a las variaciones de longitud de onda verde (555 nm) que a las azules o rojas. Agrupar en espacios de color perceptualmente uniformes como CIELAB u OKLAB elimina artefactos marrones apagados y reproduce fielmente cómo el ojo humano percibe la vibración cromática en la fotografía.

Evita el desvanecimiento neutro con ponderación no lineal de saturación

En fotografía de exteriores, paisajes y estilo de vida, entre el 60% y el 80% de los píxeles suelen pertenecer a cielos desaturados, asfalto, sombras de vegetación o paredes de interior. El simple conteo de frecuencias a menudo genera una paleta monótona de tonos grises casi idénticos. Aplicar una ponderación no lineal de saturación (multiplicando el peso de cada píxel por S^1.5) garantiza que los motivos principales vibrantes —como la chaqueta de un corredor o un centro floral familiar— se prioricen frente a los tonos dominantes del entorno.

Aplica la regla de luminancia relativa 0.18 de WCAG para contraste de texto

Nunca coloques texto blanco puro (#FFFFFF) sobre tonos medios extraídos sin calcular antes su luminancia relativa. Bajo los criterios WCAG 2.1, el cuerpo de texto estándar accesible exige un ratio de contraste mínimo de 4.5:1, mientras que los encabezados en negrita o de más de 18pt requieren 3.0:1. Si una muestra extraída tiene una luminancia relativa (L) superior a 0.18, el texto blanco no cumple los requisitos de accesibilidad; combínalo en su lugar con texto pizarra oscuro (#0F172A) para evitar la fatiga visual.

Elimina halos negros en PNG transparentes mediante máscaras alfa

Al procesar gráficos PNG con transparencias, los motores de renderizado digital interpretan los píxeles totalmente transparentes como RGBA(0, 0, 0, 0). Sin una máscara de corte alfa explícita, un icono con amplias áreas transparentes generará erróneamente negro puro (#000000) como color dominante. Aplicar un umbral alfa de 128 o componer sobre fondo blanco mate erradica por completo los halos oscuros en los contornos.

Aplica la regla armónica 60-30-10 en interiorismo e interfaces

Al trasladar una paleta fotográfica a la decoración del hogar, diapositivas o interfaces web, distribuye aproximadamente el 60% del campo visual al tono neutro dominante, el 30% a un tono secundario estructural de apoyo y el 10% al color de acento de máxima saturación. Esta proporción clásica refleja la armonía de los paisajes naturales y evita la sobrecarga sensorial visual.

Problemas comunes y soluciones

⚠️Los colores extraídos son demasiado similares o parecen tonos de gris oscuro duplicados

Aumenta el umbral de tolerancia perceptual Delta-E a 15.0 o 18.0 y cambia el motor de extracción de K-Means a Modified Median Cut. Esto obliga al algoritmo a fusionar tonos vecinos visualmente indistinguibles y explorar un espectro cromático más amplio, garantizando variedad entre luces y sombras.

⚠️El navegador muestra SecurityError o advertencia de tainted canvas al cargar una URL de imagen

Los navegadores web aplican estrictas políticas de seguridad cross-origin que bloquean la extracción cromática si las imágenes provienen de servidores de terceros sin cabeceras de acceso permisivas. Para resolverlo, guarda la imagen en tu equipo y utiliza el selector de archivos, arrastra y suelta la foto en el navegador o pégala directamente desde el portapapeles (Ctrl+V / Cmd+V) para un análisis instantáneo en el cliente.

⚠️Fotografías de móvil de 48MP o archivos RAW de alta resolución causan bloqueos momentáneos en el navegador

Las capturas de alta resolución contienen decenas de millones de píxeles. Aunque el extractor reduce automáticamente la imagen a una cuadrícula de muestreo optimizada de 256px, procesar archivos de enorme tamaño en dispositivos móviles puede generar pausas transitorias. Asegúrate de activar la aceleración por hardware en los ajustes del navegador o reduce el tamaño de la imagen antes de subirla.

⚠️Las muestras hexadecimales extraídas parecen desaturadas en comparación con la foto original en pantallas modernas

Los modelos recientes de iPhone, iPad y monitores profesionales capturan y muestran imágenes en la amplia gama Display P3, mientras que los valores de color estándar utilizan por defecto el espacio sRGB. Al trabajar con verdes fluorescentes, carmesíes profundos o puestas de sol intensas, activa el modo de amplia gama P3 en los ajustes de paleta o exporta los valores en formato CSS color(display-p3 r g b) para igualar la saturación real de la pantalla.

Preguntas frecuentes (FAQ)

¿Cómo se extrae una paleta de colores de una imagen mediante código?▼

Para extraer una paleta mediante código, se renderiza la imagen en un elemento HTML Canvas, se extraen los datos de píxeles RGBA mediante getImageData(), se genera un histograma de frecuencias y se agrupan las coordenadas cromáticas mediante algoritmos como Modified Median Cut o K-Means en el espacio CIELAB. En herramientas modernas del lado del cliente, este flujo matemático se ejecuta en el navegador en menos de 16 milisegundos, sin enviar fotografías personales a servidores externos.

¿Cuál es el mejor algoritmo para extraer colores dominantes de una imagen?▼

Modified Median Cut (MMC) se considera el estándar de referencia para obtener paletas equilibradas y cromáticamente variadas, ya que divide iterativamente las cajas delimitadoras por su eje más amplio, evitando que detalles sutiles de acento queden anulados por fondos homogéneos. Cuando el objetivo es la prevalencia estadística pura, el agrupamiento K-Means con 5 a 8 centroides ofrece la mayor fidelidad fotográfica.

¿Qué diferencia existe entre el agrupamiento RGB y la extracción Delta-E en CIELAB?▼

La diferencia fundamental radica en que RGB mide la emisión de luz del hardware en una cuadrícula no uniforme, mientras que Delta-E (ΔE) en CIELAB cuantifica la percepción visual humana uniforme. En RGB, una variación de 10 puntos en el canal verde es mucho más perceptible que la misma variación en el canal azul, lo que suele causar muestras redundantes o turbias; CIELAB modela la respuesta de los conos del ojo humano para que distancias matemáticas iguales representen diferencias percibidas idénticas.

¿Cómo garantizar que una paleta de colores extraída sea accesible según WCAG?▼

Para cumplir las pautas de accesibilidad WCAG 2.1, se calcula la luminancia relativa (L) de cada muestra con la fórmula L = 0.2126*R_lin + 0.7152*G_lin + 0.0722*B_lin y la relación de contraste frente al fondo mediante (L_claro + 0.05) / (L_oscuro + 0.05). Los textos deben alcanzar un ratio de al menos 4.5:1 para cuerpo general y 3.0:1 para títulos mayores de 18pt (o 7.0:1 para nivel AAA). Si una muestra no lo alcanza, ajusta su luminosidad o alterna el texto entre pizarra profundo (#0F172A) y blanco puro (#FFFFFF).

¿Cuántos colores debe tener una paleta de diseño equilibrada?▼

Una paleta equilibrada suele componerse de 5 a 6 colores: una base primaria dominante (60% del espacio), uno o dos tonos secundarios de soporte para superficies (30%), un tono de acento de gran impacto (10%) y dos neutros de alto contraste para textos (uno claro y uno oscuro). Seguir la regla clásica 60-30-10 de diseño gráfico e interiorismo asegura armonía visual y evita abrumar al usuario con dispersión cromática.

Herramientas y utilidades relacionadas

Todas las herramientas →
Calculadora de Proporción Áurea & PhiDiseño

Calcula dimensiones de proporción áurea y rectángulos dorados al instante. Divide longitudes según phi (1,618), escala tipografía y crea cuadrículas responsivas.

Abrir herramienta→
Generador Neumorfismo CSS & Soft UIDiseño

Genera sombras CSS neumórficas y Soft UI con superficies extruidas, hundidas, planas y cóncavas. Copia código limpio en CSS, Tailwind o SCSS al instante.

Abrir herramienta→
Generador de Paletas & Armonías de ColorDiseño

Genera esquemas armónicos de color al instante. Crea paletas complementarias, análogas, triádicas y adyacentes con verificación de contraste WCAG en tiempo real y exportación CSS.

Abrir herramienta→
Generador Glassmorphism CSS & VidrioDiseño

Genera código CSS moderno de glassmorphism y vidrio esmerilado con controles interactivos de desenfoque backdrop-filter, opacidad, bordes y sombras. Copia HTML y CSS limpios al instante.

Abrir herramienta→
Comprimir Imágenes & Reducir FotosDiseño

Comprime imágenes online sin pérdida de calidad. Reduce el tamaño de JPG, PNG y WebP en tu navegador sin subir datos al servidor, con objetivo en KB y exportación en ZIP.

Abrir herramienta→
Generador Interactivo de Gradientes CSS Lineales y RadialesDiseño

Todo el procesamiento y conversión se realiza íntegramente en la memoria de su navegador sin transmisiones externas.

Abrir herramienta→