Extraer Paleta de Colores de una Imagen — HEX/RGB y porcentaje, sin subirla (gratis)

Arrastra y suelta una imagen aquí, o haz clic para elegir

Compatible con PNG, JPEG, WebP y GIF

Tu imagen nunca se sube — todo el procesamiento ocurre en tu navegador.

Herramientas externas relacionadas

Algunos enlaces son enlaces de afiliados.

Adobe Creative CloudSuite de apps creativas CanvaDiseño gráfico fácil

Herramientas relacionadas

Conversor de ColorConvierte cualquier color entre HEX, RGB, HSL, HSV y RGBA a la vez. Edita un valor, copia con un clic, con alfa y contraste WCAG.Generador de Paletas de ColoresGenera paletas de colores armónicas desde un HEX base usando esquemas complementario, análogo, triádico y más. Bloquea colores, regenera el resto y exporta a CSS, Tailwind o JSON.Generador de GradientesCrea gradientes CSS lineales, radiales y cónicos con múltiples paradas de color. Ajusta ángulo, forma y centro, y copia el CSS de background o el valor de Tailwind con un clic.Herramienta de combinación de fuentesEncuentra combinaciones curadas de Google Fonts para títulos y cuerpo, previsualízalas en tiempo real y copia el CSS con un clic.

Esta herramienta gratuita de extracción de colores obtiene la paleta de colores dominantes de cualquier foto, ilustración o captura de pantalla — directamente en tu navegador, sin subir nada. Arrastra una imagen PNG, JPEG, WebP o GIF y la herramienta devuelve instantáneamente los colores clave usando el algoritmo de cuantización median cut, cada uno con su código HEX, valores RGB y porcentaje aproximado de la imagen. Puedes elegir cuántos colores extraer (2–12), copiar cualquier HEX con un clic, copiar todos los colores a la vez o exportar la paleta completa como variables CSS o JSON.

Cómo usar

Arrastra y suelta una imagen en el área de arriba, o haz clic para abrir el selector de archivos. Se admiten PNG, JPEG, WebP y GIF.
La paleta de colores dominantes aparece al instante — cada muestra muestra el código HEX, los valores RGB y el porcentaje aproximado del color en la imagen.
Usa el control deslizante para elegir cuántos colores extraer (2–12). La paleta se actualiza inmediatamente sin recargar la imagen.
Haz clic en una muestra o en el botón de copiar para copiar su HEX. Usa 'Copiar todos los HEX' para obtener todos los colores a la vez.
Cambia a la pestaña Exportar para obtener un bloque de variables CSS o JSON listo para pegar, luego cópialo o descárgalo.
Sin instalación, sin registro. Tu imagen nunca sale de tu dispositivo.

Funciones y funcionamiento

Extracción de colores dominantes (paleta de toda la imagen)

La herramienta no solo recoge un píxel — analiza toda la imagen usando cuantización de color median cut. El algoritmo agrupa colores similares en clústeres y elige un color representativo para cada uno, dando la historia de color general de la imagen. Para mantener la velocidad, la imagen se reduce antes del análisis (lado más largo ≤ 160 px).

HEX, RGB y porcentaje (%) de cada color

Cada color extraído muestra su código HEX (#RRGGBB, mayúsculas), valores RGB y su porcentaje aproximado en la imagen. Los colores se ordenan de mayor a menor porcentaje. Nota: el porcentaje es aproximado y puede no sumar exactamente 100% debido al redondeo independiente.

Elige cuántos colores extraer

Usa el control deslizante para establecer el número de colores de 2 a 12. Cambiar el número es instantáneo — sin recargar la imagen.

Copiar y exportar (variables CSS / JSON)

Cada muestra tiene un botón para copiar su HEX, y 'Copiar todos los HEX' toma todos los colores a la vez. El panel de exportación genera un bloque de variables CSS listo para pegar o un objeto JSON. Los valores de color son siempre compatibles con CSS.

Sin subir — tu imagen permanece en tu dispositivo

La carga, el escalado y el análisis de color ocurren localmente usando la Canvas API del navegador. Tu imagen nunca se envía a ningún servidor ni se almacena o comparte.

Casos de uso

Extraer una paleta de colores de una imagen de referencia o foto

Arrastra una foto, ilustración o captura de pantalla de un diseño que te guste. La paleta muestra los colores principales y sus proporciones — un excelente punto de partida para construir una paleta de colores para un sitio web o proyecto de diseño.

Obtener los colores de marca de un logo o activo de marca

Arrastra un logo o activo de marca para obtener los códigos HEX exactos de cada color. Útil para asegurarte de que tu sitio web, documentos y presentaciones usen los colores de marca correctos.

Exportar colores directamente a CSS o JSON

Usa el panel de exportación para copiar variables CSS o un objeto JSON directamente en tu código. El porcentaje muestra cuál es el color dominante, el acento, etc.

Notas y limitaciones

Valores aproximados: la herramienta reduce la imagen antes del análisis y agrupa colores similares, por lo que los colores y porcentajes extraídos son aproximaciones.
Los porcentajes pueden no sumar 100%: cada porcentaje de color se redondea de forma independiente a un decimal. El total puede ser ligeramente superior o inferior a 100%.
Menos colores de los solicitados: si la imagen tiene menos colores distintos que el número elegido, solo se devuelven los colores que existen. No se añaden colores falsos.
Los píxeles transparentes se excluyen: para imágenes PNG con transparencia, los píxeles completamente o mayormente transparentes (alfa < 128) no se cuentan.
Animación GIF: solo se analiza el primer fotograma del GIF animado.

Preguntas frecuentes

¿Mi imagen se sube a un servidor?: No. Todo el procesamiento ocurre localmente en tu navegador usando la Canvas API. Tu imagen nunca se envía, almacena ni comparte en ningún lugar.
¿Puedo extraer toda la paleta de colores, no solo un color?: Sí, esa es la función principal. La herramienta usa cuantización median cut para analizar toda la imagen y devolver los colores más representativos como paleta, cada uno con su porcentaje.
¿Qué tan preciso es el porcentaje (%) de cada color?: Es una aproximación. La imagen se reduce antes del análisis y se agrupan colores similares, por lo que el porcentaje refleja la presencia del color en la muestra reducida, no un conteo exacto de píxeles.
¿Cuántos colores puedo extraer?: De 2 a 12. Usa el control deslizante para establecer el número. Si la imagen tiene menos colores distintos que los solicitados, solo se devuelven los que existen — no se añaden colores falsos.
¿Qué formatos de imagen son compatibles?: PNG, JPEG, WebP y GIF (solo el primer fotograma). No se admiten SVG, HEIC y otros formatos.
¿Puedo usar los colores extraídos en mi código?: Sí. Cada color tiene un botón para copiar el HEX con un clic, y el panel de exportación genera variables CSS o un objeto JSON con HEX, RGB y ratio — listo para pegar en tu proyecto.
¿Qué pasa con un PNG transparente?: Los píxeles transparentes (alfa por debajo de 128) se excluyen del análisis, por lo que no aparecen como negro o blanco en la paleta. Una imagen completamente transparente no devolverá colores.