Grupo de un píxel
k = (⌊R ÷ 24⌋, ⌊G ÷ 24⌋, ⌊B ÷ 24⌋)
Los píxeles del mismo grupo se promedian.
Extractor de colores de imagen
Analiza localmente una imagen PNG, JPEG o WebP y obtén sus colores dominantes en HEX y RGB.
- Portapapeles
Imagen
Ninguna imagen cargada
Suelta una imagen aquí
Añade una imagen PNG, JPEG o WebP. El archivo permanece en tu dispositivo y las ediciones se realizan localmente en el navegador.
¿Necesitas más opciones?
Reúne varias herramientas de edición en un mismo espacio, con tu archivo abierto y sus cambios en curso.
Abrir el editor completoProcesando…0 %
¿Te ha resultado útil esta herramienta?
¿Cómo funciona esta herramienta?
Una foto, un cartel o un logotipo contiene unos pocos colores dominantes que le dan identidad. Este extractor los encuentra automáticamente, de 4 a 12 a elegir, con su código hexadecimal y la parte de la imagen que ocupan. Sirve para trasladar el ambiente de una foto a una maqueta, recuperar los colores de un logotipo sin el archivo original o crear una paleta acorde con una imagen de portada.
Importa una imagen PNG, JPEG o WebP, elige el Número de colores (4, 6, 8, 10 o 12; 6 por defecto) y pulsa Extraer la paleta. Para ir rápido, el análisis se hace sobre una copia reducida a 420 px en su lado mayor; los píxeles casi transparentes se ignoran.
Los colores se agrupan en escalones de 24 niveles en cada canal rojo, verde y azul, y cada grupo toma el color medio de sus píxeles. Se conservan los grupos más numerosos y luego se fusionan los colores a menos de 28 de distancia en el espacio RGB: dos rojos casi iguales cuentan como uno.
La paleta se muestra del color más presente al menos presente. Cada muestra indica su código HEX y el porcentaje de la imagen analizada que representa; un clic copia el código. Una imagen con pocos colores puede devolver menos de los pedidos.
Cómo utilizar esta herramienta
Importa la imagen
Arrastra una foto, una captura o un logotipo en PNG, JPEG o WebP.
Elige el número de colores
4 para un logotipo sencillo, de 8 a 12 para una foto con muchos matices.
Extrae y copia
Pulsa Extraer la paleta y luego una muestra para copiar su código HEX.
Cómo se calcula la paleta
La extracción combina una cuantización por escalones, la fusión de colores vecinos y un cálculo de proporción.
Fusión de colores vecinos
d = √((R1 − R2)² + (G1 − G2)² + (B1 − B2)²) < 28
Dos colores a menos de 28 se fusionan en una media ponderada.
Proporción de la imagen
p = nc ÷ n_opacos × 100
Redondeada a la décima.
- R, G, B
- canales rojo, verde y azul de 0 a 255
- nc
- número de píxeles asignados al color
- n_opacos
- número de píxeles analizados no transparentes
Casos de uso
Trasladar el ambiente de una foto
Recupera los tonos de una foto de portada para dar color a los títulos y botones de una página.
Recuperar los colores de un logotipo
Obtén los códigos HEX de un logotipo del que solo tienes una imagen PNG.
Comprobar una identidad visual
Verifica que un diseño usa de verdad los colores de la marca y en la proporción adecuada.
Ejemplos
Foto de playa con zona transparente
Los 200 píxeles transparentes quedan fuera del cálculo, de ahí 600 ÷ 1000 = 60 %. Solo hay 3 colores distintos, así que la paleta tiene 3 y no 4.
Entrada
Imagen de 1200 píxeles: 600 azul cielo (135, 206, 235), 300 arena (228, 197, 144), 100 gris oscuro y 200 transparentes; 4 colores pedidosResultado
#87CEEB 60 % · #E4C590 30 % · #282828 10 %Dos rojos casi idénticos
Los dos rojos están a √(15² + 10² + 5²) ≈ 18,7 < 28: se fusionan en una media ponderada (206, 34, 32) que representa el 80 % de la imagen.
Entrada
500 píxeles (200, 30, 30), 300 píxeles (215, 40, 35) y 200 píxeles azules (30, 60, 200)Resultado
#CE2220 80 % · #1E3CC8 20 %Consejos y buenas prácticas
- Recorta antes la imagen a la zona que te interesa: un gran fondo blanco o un cielo ocuparían el primer puesto de la paleta.
- Con una foto, pide más colores de los necesarios y quédate con los que combinan.
- Los colores extraídos son medias: para el código exacto de un píxel, amplía una zona lisa y compruébalo con el conversor de colores.
- Prueba después la paleta con el simulador de daltonismo si debe servir para distinguir información.
Fuentes y referencias
- MDN Web Docs, Pixel manipulation with canvas (se abre en una pestaña nueva)Página en inglés
Preguntas frecuentes
¿Cómo elige la herramienta los colores dominantes?
Agrupa los píxeles cercanos en escalones de 24 niveles por canal, conserva los grupos más numerosos, fusiona los colores demasiado parecidos y ordena el resultado por proporción.
¿Por qué obtengo menos colores de los pedidos?
Porque la imagen no tiene suficientes colores distintos: tras fusionar los tonos vecinos pueden quedar menos colores que el número elegido.
¿Qué indica el porcentaje?
La proporción de píxeles analizados, sin contar los transparentes, asignados a ese color. La suma puede ser inferior al 100 % si no se muestran colores secundarios.
¿Los códigos son exactos al píxel?
Son medias de grupos de píxeles calculadas sobre una copia reducida a 420 px. Reflejan fielmente el ambiente, no el valor de un píxel aislado.
¿Cuentan las zonas transparentes?
No. Los píxeles con muy poca opacidad se ignoran, así un logotipo recortado no devuelve negro o blanco sobrantes.
¿Se sube mi imagen a un servidor?
No. El muestreo y el cálculo de la paleta se hacen en tu navegador.
Herramientas relacionadas
Continúa con estas herramientas
Herramientas similares o complementarias a esta.
Herramientas similares
Crea una paleta complementaria, análoga, triádica o monocromática a partir de un color.
Imágenes y diseño gráficoUsar esta herramienta
Convierte un color entre HEX, RGB y HSL con sus valores equivalentes.
Imágenes y diseño gráficoUsar esta herramienta
Previsualiza una imagen como puede percibirse con distintos tipos de daltonismo.
Imágenes y diseño gráficoUsar esta herramienta
También te puede interesar
ReferenciaConceptos y tecnologíasPrincipiante
¿Cómo se construye una imagen digital?
Comprende cómo se combinan píxeles, canales de color, profundidad y transparencia para formar una imagen mostrada en pantalla.
31 de agosto de 202617 min
GuíaBuenas prácticasPrincipiante
¿Cómo crear una paleta de colores a partir de una imagen?
Extrae los colores dominantes de una imagen, asigna funciones y construye una paleta coherente sin confundir frecuencia e importancia visual.
31 de agosto de 202615 min
ReferenciaConceptos y tecnologíasPrincipiante
RGB, HEX o HSL: ¿qué notación elegir?
Comprende cómo RGB, HEX y HSL describen colores sRGB para elegir una notación CSS legible y convertir valores sin confusiones.
31 de agosto de 202612 min
TutorialBuenas prácticasPrincipiante
¿Cómo comprimir una imagen sin perder calidad?
Reduce el peso de una imagen eligiendo las dimensiones adecuadas, el formato correcto y un nivel de calidad controlado, sin una degradación visible innecesaria.
31 de agosto de 202626 min