Ves un color en una captura de pantalla: un verde-azulado perfectamente saturado en un anuncio de Stripe, un verde salvia relajante en una landing page de SaaS, y quieres usarlo en tu propio proyecto. Sabes que el color esta en algun lugar de la imagen, pero como sacas el valor #xxxxxx?

La respuesta es la extraccion de paletas de colores: un proceso que escanea todos los pixeles de una imagen y devuelve los colores dominantes. Los disenadores llevan anos haciendo esto manualmente en Photoshop, pero hoy hay alternativas mas rapidas, gratuitas y en el navegador que tardan 30 segundos sin instalar nada.

Esta guia compara 3 metodos gratuitos, recorre el flujo de 30 segundos con el recomendado y muestra como leer el resultado para que puedas copiar colores directamente a tu CSS, archivo de Figma o design tokens.

Los 3 metodos gratuitos de un vistazo

MetodoVelocidadPrecisionPrivacidadCoste
Cuentagotas de Photoshop / GIMPLento (manual, un color a la vez)Pixel-perfect100% localGratis (GIMP) / $25/mes (Photoshop)
Sitios de extraccion onlineRapidoBueno⚠️ Imagen subida al servidorGratis con anuncios, HD de pago
Herramienta en el navegador (sin subida)30 segundosBueno para diseno100% local, la imagen nunca saleGratis

La tercera opcion, un extractor totalmente en el navegador, es el punto ideal para 2026. Obtienes velocidad casi de Photoshop para paletas de grado diseno, tu imagen nunca sale del dispositivo, y no hay registro, ni popups, ni limite de 5 megapixeles.

Por que “colores dominantes” supera a “color promedio”

Si tomas una foto de 1000×1000 y promedias todos los pixeles, casi siempre obtendras un marron grisaceo turbio que no aparece en ningun lugar de la imagen real. Un ejemplo real:

  • Una foto de un limon amarillo sobre una mesa blanca: RGB promedio = (178, 165, 105), un caqui desaturado que no existe en la foto.
  • El color dominante de esa misma foto: #F4D03F, el amarillo limon real que ven tus ojos.

Los algoritmos que reportan “el color promedio” son tecnicamente correctos pero visualmente insignificantes. La extraccion real de paletas funciona agrupando pixeles similares en cubos y reportando que cubos tienen mas pixeles. Una foto con un limon, una hoja y un fondo blanco produce 3 colores dominantes, no 1 promedio turbio.

Metodo 1: Cuentagotas de Photoshop / GIMP (el metodo clasico)

Esto es lo que hacian los disenadores desde 2000 hasta ~2018. El flujo:

  1. Abre la imagen en Photoshop o GIMP.
  2. Cambia a la herramienta Cuentagotas (I en Photoshop).
  3. Haz clic en un solo pixel.
  4. Lee el valor HEX del selector de color.
  5. Repite 5-6 veces para los colores que realmente quieres.

La trampa: te da el color en el pixel exacto donde hiciste clic, no los colores dominantes de la imagen. Si quieres una paleta representativa, necesitas saber que pixeles clicar, normalmente el area plana mas grande de cada color. Los disenadores lo calculan a ojo, pero requiere practica y el resultado varia segun la persona.

Cuando seguir usando este metodo: cuando necesites muestreo de color pixel-perfect de un area especifica, como sacar el color exacto de un boton en un mockup de UI, o igualar un logo que tiene bordes con anti-aliasing.

Metodo 2: Sitios de extraccion de paletas online

Sitios como Coolors.co, ColorThief y Adobe Color tienen funciones de “imagen a paleta”. La mayoria funcionan igual:

  1. Sube tu imagen.
  2. El sitio ejecuta la extraccion en el servidor.
  3. Obtienes una paleta con valores HEX y un boton de “descargar como ASE / GPL / CSS”.

Pros: herramientas consolidadas, a menudo incluyen formatos de exportacion que los disenadores quieren (Adobe Swatch Exchange, paletas de Sketch, variables CSS).

Contras:

  • Privacidad: tu imagen se sube a un servidor de terceros. Para fotos personales, incomodo. Para capturas de productos no publicados o trabajo de clientes, puede violar el NDA.
  • Limites: la mayoria de los niveles gratuitos capan en 1-5 megapixeles o requieren registro para HD.
  • Anuncios y popups: los niveles gratuitos empujan suscripciones premium agresivamente.
  • Sin control sobre el algoritmo: obtienes 5 u 8 colores, no “quiero exactamente 6 colores con cuantizacion de 32 cubos”.

Para proyectos personales, estos sitios funcionan. Para algo sensible, o algo que haras mas de dos veces, la friccion se acumula.

Metodo 3: Herramienta en el navegador (el estandar 2026)

El flujo mas rapido, mas privado y mas repetible. Todo sucede en el cliente con JavaScript sobre un <canvas>, asi que:

  • Sin subida de imagen
  • Sin procesamiento en servidor
  • Sin limites de tamano de archivo mas alla de lo que tu navegador puede renderizar
  • Funciona offline una vez cargada

Aqui va el flujo de 30 segundos usando el Selector de color y paleta gratuito de Piick:

  1. Abre la pagina piick.cc/tools/color-palette-extractor.
  2. Haz clic en la pestana Paleta de imagen.
  3. Arrastra cualquier imagen (JPG, PNG, WebP, GIF, hasta 10 MB) a la zona de subida.
  4. Elige cuantas muestras quieres (5, 6 u 8).
  5. Haz clic en Extraer paleta.
  6. Cada muestra muestra su codigo HEX y el porcentaje de la imagen que cubre.
  7. Haz clic en cualquier muestra para expandirla: obtendras HEX, RGB, HSL y botones de copiar para cada formato.

Tiempo total: 30 segundos para una captura, 60 segundos para una foto principal.

Como funciona el algoritmo (la version corta)

Cuando haces clic en Extraer, la herramienta hace cuatro cosas:

  1. Reduce la imagen a una miniatura de 200×200 (por eso se mantiene rapida con archivos grandes).
  2. Agrupa en cubos cada pixel redondeando cada canal de color al multiplo de 32 mas cercano, asi (255, 200, 150) y (248, 192, 144) caen en el mismo cubo.
  3. Cuenta cuantos pixeles caen en cada uno de los 512 cubos posibles.
  4. Devuelve los K cubos principales por conteo de pixeles, ordenados del mas dominante al menos dominante.

Esto se llama cuantizacion por cubos (o cuantizacion de color). No es tan suave como k-means, pero:

  • Es ~10x mas rapida (sin iteracion, un solo paso por los pixeles)
  • Es deterministica: la misma imagen siempre da la misma paleta
  • Es facil de razonar: los cubos son visibles en el histograma

Para paletas de grado diseno (5-8 colores de una marca, una foto, una captura de UI), la cuantizacion por cubos es mas que suficiente. K-means es para aplicaciones cientificas como imagenes medicas.

Leer el resultado: que significan los porcentajes

Cuando la herramienta dice “Color 1: #3B82F6, proporcion: 42%”, eso no significa que el 42% de la imagen sea exactamente #3B82F6. Significa que el 42% de los pixeles muestreados cayeron en el cubo que redondea a #3B82F6. Los colores reales en esa zona de tu imagen podrian ir de #3580F0 a #4290FA, todos redondeados a la misma muestra.

Esto esta bien para trabajo de diseno. Si necesitas el valor medio exacto de una region, usarias una herramienta diferente.

Mas alla de la extraccion: el selector manual

Misma herramienta, pestana Selector de color. Util cuando:

  • Estas partiendo de un color (un color de marca de tu guia de estilo) y quieres verlo en HEX, RGB y HSL al mismo tiempo
  • Quieres generar armonias: variaciones complementarias, analogas y triadicas de un color base, sin abrir Figma o un libro de teoria del color
  • Estas convirtiendo entre formatos: alguien te envio rgb(59, 130, 246) y lo necesitas como #3B82F6 para CSS

Cinco muestras de armonias se actualizan en vivo cuando cambias el color base. Haz clic en cualquier armonia para cargarla en el selector.

Tres escenarios del mundo real

Escenario 1: Igualar el color de marca de un competidor

Una landing page de SaaS tiene un color de boton que quieres tomar prestado para tu propio rediseno. Haz una captura de la pagina, abre la herramienta, suelta la captura. Extrae 6 muestras. El color del boton sera una de ellas, normalmente la mas saturada. Haz clic para expandir, copia el HEX, pegalo en tu CSS.

Consejo: primero recorta la captura solo al boton, asi otros elementos de UI no contaminan la paleta.

Escenario 2: Construir una paleta desde una foto para una entrada de blog

Tomaste una foto de un bosque para la cabecera de un blog y quieres usar sus colores como paleta de acentos del articulo. Extrae 5 muestras de la foto. Obtendras 2-3 verdes, un marron, quizas un azul cielo. Elige los 3 que tengan mejor contraste contra tu fondo y usalos como colores de acento.

Consejo: los porcentajes de proporcion te ayudan a decidir que colores son “fondo” (alta proporcion) vs “acento” (baja proporcion). No elijas el color principal como acento: peleara con tu fondo real.

Escenario 3: Verificar el entregable de un disenador

Un disenador freelance te envio una ilustracion principal con una paleta de marca. Suelta la ilustracion. Extrae 6 muestras. Compara los valores HEX resultantes con la guia de estilo de marca. Si #FF6B35 deberia ser el naranja primario y la extraccion te da #FF7039, tienes una conversacion pendiente: es una diferencia de 2 bits por canal, pero suficiente para que los disenadores lo noten.

Problemas comunes (y que hacer)

  • La paleta tiene demasiados colores similares. Tu imagen esta dominada por un tono (atardecer, manana brumosa). Solucion: extrae solo 5 muestras, o elige de las de menor proporcion para acentos de contraste.
  • La paleta tiene marrones turbios feos. Hay mucho ruido de compresion en la imagen. Solucion: usa una fuente de mayor calidad (PNG en vez de JPG, o un JPG de mayor resolucion). La cuantizacion por cubos no puede distinguir senal de artefactos de compresion.
  • El color dominante es blanco o negro. La imagen tiene mucho fondo (captura de pantalla, logo sobre blanco). Solucion: recorta mas cerrado antes de extraer, o usa el selector manual para definir el fondo y luego muestrear el primer plano.
  • Quieres mas de 8 colores. La cuantizacion por cubos topa cerca de 8-10 muestras utiles antes de que los cubos adyacentes empiecen a pelear. Para paletas de 20+ colores, necesitas una herramienta de diseno real (Figma, Adobe Color).

Cuando saltarte la extraccion por completo

A veces la respuesta no es “extraer de una imagen”, sino “elegir de una paleta curada”:

  • Colores de marca que ya existen en una guia de estilo: solo copia el HEX directamente
  • Material Design / Tailwind / Bootstrap: paletas bien probadas que ya cubren la mayoria de casos
  • Paletas guiadas por accesibilidad: cuando el contraste WCAG es la restriccion, necesitas herramientas basadas en ratios, no extraccion

La cuantizacion por cubos es para “veo un color, quiero el codigo”. Para todo lo demas, usa otra herramienta.

Pruebala ahora

Abre el Selector de color y paleta, suelta cualquier imagen, y tendras una paleta de 6 colores con codigos HEX en 30 segundos. Sin subida, sin registro, sin limites mas alla de la memoria de tu navegador.

Una vez que tengas tu paleta, pegala en un bloque de variables CSS. Una extraccion de 6 colores sobre una captura estilo Stripe podria darte algo como:

  • --color-1: #3b82f6; — azul principal de marca
  • --color-2: #1e40af; — estado hover/activo
  • --color-3: #93c5fd; — acento claro
  • --color-4: #fbbf24; — advertencia / destacado
  • --color-5: #f59e0b; — acento secundario
  • --color-6: #111827; — texto / superficie oscura

Luego en tu hoja de estilos, referencielos como var(--color-1) en vez del HEX crudo. Publica.