Cómo extraer un color de una imagen (herramienta Cuentagotas)

¿Qué es una herramienta de Cuentagotas?

El Cuentagotas es una herramienta que muestrea el color exacto de cualquier píxel de una imagen. Haz clic en un píxel y la herramienta te devuelve el valor numérico del color — normalmente como HEX, RGB o HSL. Diseñadores y desarrolladores la usan constantemente: "Me encanta ese azul de la foto, ¿cuál es?" se convierte en una tarea de 2 segundos con un Cuentagotas.

Las razones por las que la gente extrae colores de imágenes son prácticas y frecuentes:

• Hacer coincidir marca y foto: tienes una foto de producto y quieres que el color de acento del sitio web haga eco del producto. El Cuentagotas encuentra el tono exacto.
• Replicar un diseño: ves un sitio web o póster que te encanta y quieres el mismo azul en tu propio proyecto. Cuentagotas a una captura y tienes el código hex.
• Construir una paleta: una foto tiene 5-6 colores dominantes que se ven geniales juntos. El Cuentagotas los extrae como punto de partida.
• Igualar pintura o tela: saca una foto de una pared, Cuentagotas el color y llévalo a una tienda de pinturas para igualar la muestra.
• Corrección de color precisa: ¿necesitas igualar el azul de un logo en dos imágenes? Cuentagotas en ambas, compara los códigos, ajusta.
• Curiosidad: "¿Ese negro es realmente negro, o es azul oscuro?" Un Cuentagotas responde con un clic.

La buena noticia: con la herramienta adecuada, extraer un color de una imagen es un trabajo de 10 segundos y no requiere instalar nada.

Método 1: Usa el Cuentagotas de color gratis de UtilBoxx (Recomendado)

La forma más rápida, segura y privada de extraer colores de una imagen es la herramienta Cuentagotas de UtilBoxx. Se ejecuta por completo en tu navegador, por lo que tu imagen nunca sale de tu dispositivo. Sin subidas, sin registro y sin rastreo.

Así se usa:

1. Ve a utilboxx.com/es/tools/color/picker
2. Haz clic en el área de subida y selecciona tu imagen (o arrástrala)
3. Pasa el cursor sobre la imagen — la vista previa en vivo muestra el código hex bajo tu cursor
4. Haz clic en cualquier parte de la imagen para "bloquear" ese color
5. Lee el color en HEX, RGB y HSL simultáneamente
6. Haz clic en cualquier salida para copiarla al portapapeles
7. Opcional: haz zoom para muestreo con precisión de píxel

Por qué recomendamos este método:

• 100% gratis, sin cuenta, sin registro, sin verificación de email
• Privacidad primero: todo se procesa localmente en tu navegador. Tu imagen nunca llega a un servidor.
• Vista previa en vivo: ve el color bajo tu cursor antes de hacer clic
• Los tres formatos: HEX, RGB, HSL mostrados a la vez
• Copia con un clic: copia cualquier formato al portapapeles
• Soporte de zoom: obtén muestras con precisión de píxel en imágenes pequeñas o detalladas
• Funciona en cualquier dispositivo: Windows, Mac, Linux, ChromeOS, iOS, Android

Si solo necesitas extraer colores de vez en cuando, esta es la opción de menor fricción con diferencia.

Método 2: Adobe Photoshop (De pago)

Photoshop es el peso pesado de la edición de imágenes, y su herramienta Cuentagotas (atajo de teclado I) es el estándar de oro para el muestreo de color. Haz clic en cualquier parte de una imagen abierta y la muestra de color de primer plano se actualiza al valor muestreado. El panel Info (Ventana > Info) muestra las coordenadas exactas del píxel y el color en CMYK, RGB, HSB, Lab y Web (hex) — todo a la vez. También puedes ajustar el tamaño de muestra a "Promedio 3x3" o "Promedio 5x5" para muestrear una región pequeña en lugar de un solo píxel, útil para imágenes con ruido o suavizado.

El inconveniente es el precio. Photoshop forma parte de una suscripción a Creative Cloud que cuesta aproximadamente $22,99 al mes (unos $240 al año). Para una extracción puntual es excesivo, y el panel de opciones es más de lo que la mayoría necesita.

Photoshop solo vale la pena si ya lo usas para retoque, composición o diseño. Si la extracción de color es todo lo que necesitas, una herramienta de navegador hace el trabajo sin factura ni instalación.

Método 3: Digital Color Meter de macOS (Integrado, gratis)

Si estás en Mac, ya tienes un Cuentagotas potente instalado: Digital Color Meter. Vive en Aplicaciones > Utilidades. Ábrelo, elige tu pantalla, pasa la lupa sobre cualquier píxel de la pantalla (no solo dentro de una imagen — en cualquier lugar), y mostrará el color en RGB, hex o porcentaje. También puedes bloquear la vista en una pequeña ventana que queda siempre encima, perfecta para contrastar colores entre apps.

Para usarlo con una imagen:

1. Abre la imagen en Vista Previa, Quick Look o cualquier visor
2. Abre Digital Color Meter (Cmd+Space, escribe "Digital Color Meter")
3. Haz clic en la imagen — el color aparece en el medidor
4. Elige Color > Copiar como texto (o pulsa Cmd+Shift+C) para obtener el código hex en tu portapapeles
5. Pégalo donde quieras

Esta es la herramienta más subestimada de macOS. Viene integrada, es gratis y funciona con cualquier píxel de la pantalla — no solo dentro de una app. En Windows, Microsoft PowerToys tiene una utilidad "Color Picker" similar que hace el mismo trabajo (pulsa Win+Shift+C para activarla).

Preguntas frecuentes

¿Puedo muestrear colores de una web?

Sí. En Chrome, Firefox o Edge, abre DevTools (F12 o Cmd+Opt+I), haz clic en la herramienta "Inspeccionar" (icono arriba a la izquierda), luego haz clic en la página. El panel Estilos muestra los colores usados en ese elemento, y puedes hacer clic en la muestra para ver hex, RGB, HSL e incluso modificar el color en vivo. En macOS, Digital Color Meter puede muestrear cualquier píxel de la pantalla, incluidos los de un navegador.

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

• HEX es un código de seis caracteres como `#FF5733`, el estándar para CSS
• RGB son tres números 0-255, como `rgb(255, 87, 51)`, los valores crudos de pantalla
• HSL es tono/saturación/luminosidad, más intuitivo para ajustar colores

Los tres describen el mismo color. UtilBoxx muestra los tres juntos para que copies el formato que tu proyecto necesite.

¿Cómo extraigo un color de una imagen pequeña o detallada?

Haz zoom. UtilBoxx soporta zoom en la imagen para que puedas colocar el cursor sobre el píxel exacto. En Photoshop, el Cuentagotas tiene un desplegable de "Tamaño de muestra" que te permite promediar sobre 3x3 o 5x5 píxeles, un gran respaldo para imágenes con ruido.

¿Cómo igualo un color que veo en la vida real?

Usa la cámara de tu teléfono, Cuentagotas la foto que tomaste y usa el color muestreado. Para más precisión, fotografía el objeto con buena luz natural (sin flash), Cuentagotas un área plana y vuelve a comprobar el resultado contra el propio objeto.

¿Puedo extraer un color de un PDF o un vídeo?

Sí — haz una captura (Cmd+Shift+4 en Mac, Win+Shift+S en Windows) y luego Cuentagotas la captura. Para vídeo, pausa en un fotograma, captura, Cuentagotas. UtilBoxx acepta JPG, PNG y WebP, así que cualquier captura en esos formatos funciona.

¿Es seguro usar un Cuentagotas de color online?

Depende del servicio. UtilBoxx procesa todo en tu navegador — sin subida, sin procesamiento en el servidor, sin registros. Con otras herramientas, asume que tu imagen se está subiendo a un servidor remoto y lee atentamente su política de privacidad. Para imágenes personales o propietarias, una herramienta solo-navegador es la opción más segura.

Conclusión

El Cuentagotas es una de las herramientas pequeñas más útiles en el kit de cualquier diseñador o desarrollador, y no debería requerir una suscripción de pago. Para la mayoría de la gente, el Cuentagotas de color gratis de UtilBoxx es la opción obvia: es privado, rápido y gratis, sin registro.

Si eres diseñador y ya vives en Photoshop, la herramienta Cuentagotas es un gran respaldo. Si estás en Mac, Digital Color Meter es una excelente opción siempre disponible. Y GIMP, la alternativa gratuita a Photoshop, tiene el mismo Cuentagotas a coste cero.

Para todo lo demás, visita las herramientas de color de UtilBoxx y encontrarás un conjunto completo de herramientas para trabajar con colores, con privacidad como prioridad, todo en tu navegador.