Extractor de paleta de colores

Extrae los colores dominantes y valores HEX de cualquier imagen

Haz clic para seleccionar o suelta una imagen

Cómo funciona

Extractor de paleta de colores — Extrae los colores dominantes y valores HEX de cualquier imagen. Todo el procesamiento ocurre en tu navegador — sin subida, sin registro, sin email. Gratis para siempre.

Última actualización: 2026-05-06

Editor's note

Lo usamos sobre capturas de competidores y fotos de producto para extraer paletas para nuestro propio trabajo de marca, que es la razón real por la que existe. La mayoría de los extractores de paleta te muestran una rejilla sin estilo con códigos HEX debajo en gris diminuto, y acabas entornando los ojos, copiando y perdiendo el sitio. El nuestro lo construimos para que el HEX aparezca al pasar el cursor justo donde ya está: el ojo ya está sobre la muestra, y obligarlo a bajar a buscar un pie de foto es un impuesto pequeño pero real que se acumula a lo largo de una jornada de trabajo.

La otra decisión que tomamos pronto fue arrancar con siete muestras por defecto, no diez. Las herramientas que exhiben doce o dieciséis colores por defecto se ven más impresionantes en capturas pero producen paletas que nadie puede usar de verdad; la cola larga es mayormente ruido sacado de bordes y sombras. Siete te da la historia dominante más un par de acentos, que es la forma de una paleta usable. Puedes subirlo cuando quieras inspiración, pero el valor por defecto es el tamaño que de verdad se entrega.

Acerca de Extractor de paleta de colores

El Extractor de paleta de colores saca los colores dominantes de cualquier imagen y te entrega valores HEX, RGB y HSL listos para pegar en tu sistema de diseño, en CSS o en Figma. Es la forma más rápida de traducir una foto de inspiración a una paleta de marca, casar los acentos de UI con una imagen hero o muestrear la paleta de un competidor.

Los diseñadores que arrancan una marca extraen paleta desde un mood board. Los front-end toman muestras de la imagen hero para mantener los acentos en armonía. Marketing extrae los colores de un producto para alimentar las creatividades de campaña. Interioristas y estilistas hacen lo mismo con fotos de telas o estancias.

El muestreo se procesa en tu navegador mediante canvas: la imagen de inspiración nunca sale del dispositivo, algo esencial cuando la fuente es un mood board privado o un asset de campaña sin lanzar.

Cómo usar Extractor de paleta de colores

Arrastra una imagen (foto, ilustración, captura: cualquier ráster) a la zona de carga.
Mueve el deslizador de número de colores entre 3 y 16 para decidir cuántas muestras quieres.
Inspecciona la fila de muestras: cada chip enseña debajo su valor HEX.
Haz clic en cualquier muestra para copiar el HEX. Cambia el selector de formato para obtener salida RGB o HSL.
Vuelve a ejecutar con otro número para comparar paletas amplias frente a más granulares: a veces 5 muestras cuentan una historia más limpia que 12.

Casos de uso comunes

Construir una paleta de marca a partir de una sola foto de mood para una propuesta a un nuevo cliente.
Elegir el color de un botón CTA que combine con la imagen hero del sitio web.
Extraer los colores de un look de moda para una página de categoría de e-commerce.
Muestrear colores de capturas de competidores durante una auditoría de marca.
Generar una escala de color para Tailwind a partir de una imagen fuente (extrae 5 colores y construye tints/shades de cada uno).

Consejos y errores comunes

Las fotos de naturaleza suelen producir paletas más ricas que las capturas de UI: la UI tiende a estar dominada por blancos y grises de fondo.
Recorta la imagen al área que te interesa antes de extraer. Un paisaje completo te dará cielo y tierra; un detalle recortado saca los colores del sujeto.
Cinco a siete colores es el punto óptimo para una paleta usable. Dieciséis es genial para inspirar pero rara vez entra tal cual en un sistema de diseño.
Si la paleta resultante se siente embarrada, sube primero el contraste de la imagen fuente: las fotos lavadas producen paletas lavadas.

Preguntas frecuentes

¿Cómo se calcula la paleta?

Muestreamos píxeles en una rejilla RGB 6×6×6 gruesa, promediamos cada bin y mantenemos los buckets más frecuentes. Rápido y produce colores visualmente agrupados.

¿Cuántos colores puedo obtener?

Entre 3 y 16. Conteos más altos resaltan acentos más sutiles a costa de buckets menos distintos.

¿Se sube mi imagen?

No. El muestreo corre en el navegador vía canvas — nada se envía.

¿Puedo exportar la paleta a Figma o Adobe?

Aún no directamente. De momento, copia cada HEX y pégalos en tu herramienta: los color styles de Figma aceptan HEX directamente y Adobe acepta importaciones ASE construidas a partir de una lista HEX. El export con un clic está en el roadmap.

¿Por qué mi foto de un arcoíris devuelve solo seis colores?

Tonos visualmente similares colapsan en el mismo bin RGB durante el muestreo. Sube el número de colores a 12 o 16 para sacar más matices, o recorta a la región con más variedad.

¿Los valores HEX son píxeles exactos?

Son la media de cada bin, no una muestra de un solo píxel. Por eso parecen 'el color que elegirías a ojo' y no un píxel aleatorio que podría provenir de un borde o una sombra.