Diseño

Extractor de colores de imagen

Subí, arrastrá o pegá una imagen y obtené su paleta de 8 colores dominantes al instante. Hacé click en cualquier pixel para su HEX, RGB y HSL exactos. Todo pasa en tu navegador: la imagen nunca se sube a ningún servidor.

Instantáneo🔒En tu navegadorSin registro
En vivo

Arrastrá tu imagen acá

o hacé click para elegirla, o pegala con Ctrl+V / Cmd+V

Sacá la paleta exacta de cualquier imagen, sin subirla a ningún lado

¿Te pasaron un logo y necesitás su azul exacto? ¿Viste una foto con una combinación de colores perfecta para tu próxima landing? ¿Querés que tu presentación respete el branding de la marca a partir de un screenshot? Este extractor resuelve eso en segundos: cargás la imagen y te devuelve los 8 colores dominantes, y con un click sobre cualquier pixel obtenés su código HEX, RGB y HSL exactos, listos para pegar en CSS, Figma, Canva o donde trabajes.

El diferencial clave: tu imagen nunca sale de tu dispositivo. A diferencia de la mayoría de los extractores online, acá no hay upload: el análisis corre 100% en tu navegador con la API canvas. Eso lo hace apto para material confidencial —logos sin publicar, mockups internos, documentos— y además instantáneo, porque no espera a ningún servidor. Ideal para diseño web, branding, matching de colores para redes y armado de paletas coherentes a partir de fotos reales.

Tres formas de cargar la imagen

  • Click en la zona punteada para abrir el selector de archivos (en el celular podés sacar una foto directo).
  • Arrastrar y soltar el archivo desde tu carpeta de descargas o el escritorio.
  • Pegar con Ctrl+V / Cmd+V: copiá una imagen (por ejemplo un screenshot recién tomado) y pegala directo en la página.

Qué hacer con un color extraído: armonías de color

Extraer el color es la mitad del trabajo; la otra mitad es decidir qué colores lo acompañan. Esta tabla resume las cuatro armonías clásicas y cuándo conviene cada una:

ArmoníaQué esCuándo usarla
ComplementariaEl color opuesto en la rueda cromática (matiz + 180°). Máximo contraste posible.Botones y llamadas a la acción que tienen que saltar a la vista; acentos sobre un color de marca dominante.
AnálogaLos colores vecinos en la rueda (matiz ± 30°). Transición suave, sin choques.Fondos, degradados e interfaces calmas donde querés cohesión más que contraste; branding "de una sola familia".
TriádicaTres colores equidistantes en la rueda (matiz + 120° y + 240°). Variedad con equilibrio.Ilustraciones, infografías y material infantil o lúdico que necesita varios colores vivos sin caos.
MonocromáticaUn solo matiz variando saturación y luminosidad (claros y oscuros del mismo color).Interfaces elegantes y minimalistas, dashboards, y cuando la marca exige un único color protagonista.

Si querés generar estas armonías automáticamente a partir de un HEX, usá nuestro generador de paletas de colores: pegás el color que extrajiste acá y te arma los esquemas completos. Y si necesitás pasar el color a otro formato (HSV, o ajustar canales a mano), el conversor de color HEX/RGB/HSL lo hace al instante con vista previa.

Consejos para extraer el color correcto

  • Evitá los bordes: el anti-aliasing mezcla el color con el fondo. Clickeá en el centro de las zonas planas.
  • Cuidado con JPG muy comprimidos: la compresión mete ruido; un mismo "rojo" puede variar pixel a pixel. Preferí PNG cuando puedas.
  • Verificá con varios clicks: si tres puntos de la misma zona dan el mismo HEX, ese es el color real.
  • Usá la paleta dominante como base y el click por pixel para el ajuste fino de un tono puntual.

Preguntas frecuentes

¿Se sube mi imagen a algún servidor?

No. Todo el análisis ocurre en tu navegador con la API canvas: no hay upload, no hay backend y no queda copia en ningún lado. Podés usarla con material confidencial.

¿Qué formatos de imagen soporta?

Todos los que tu navegador pueda mostrar: JPG, PNG, WebP, GIF, AVIF, BMP y SVG. Si el archivo no es una imagen válida, te avisamos con un error claro.

¿Por qué el HEX puede variar entre monitores?

El código extraído es exacto (los valores RGB reales del pixel); lo que cambia es cómo cada pantalla lo muestra según su perfil de color, calibración y brillo.

¿Cómo saco el color exacto de un logo?

Subilo en la mejor calidad posible (ideal PNG), clickeá en el centro de una zona plana lejos de los bordes, y repetí en 2 o 3 puntos para confirmar que el HEX se repite.

¿Cómo se calcula la paleta dominante?

Cuantizamos los colores en buckets (reduciendo cada canal RGB), contamos frecuencias y elegimos los 8 más presentes, descartando tonos casi idénticos entre sí.

¿Hay límite de tamaño de imagen?

No hace falta: escalamos la imagen a un máximo de ~600 px manteniendo la proporción, así el análisis es instantáneo incluso con fotos enormes.

¿Funciona en el celular?

Sí: elegí una foto de la galería o sacá una con la cámara y tocá el pixel que quieras. El drag & drop es cosa de desktop, pero todo lo demás funciona igual.

¿Cuál es la diferencia entre HEX, RGB y HSL?

Son tres notaciones del mismo color: HEX es la compacta de la web, RGB la mezcla de rojo/verde/azul y HSL matiz-saturación-luminosidad. Te damos las tres para copiar.

¿Te sirvió este generador?