Cómo saber el color de una imagen (5 métodos)
La forma más rápida de saber el color de una imagen es abrir un cuentagotas digital, apuntar al píxel que te interesa y copiar el código. Puedes hacerlo directamente en el navegador, sin instalar nada, con el selector de color en imagen de este sitio: sube o pega la imagen, haz clic en el punto que quieras y obtén el valor en HEX, RGB, HSL, HSV y CMYK.
Si ya trabajas en un programa de diseño o en las DevTools, también puedes resolverlo ahí. A continuación tienes cinco métodos, del más sencillo al más especializado, los atajos del sistema operativo y los detalles que garantizan que el código capturado sea de verdad el color que estás viendo.
Método 1: la herramienta online del sitio
Es la opción ideal cuando tienes un archivo, una captura de pantalla o una foto y quieres el código sin abrir programas pesados. Todo ocurre en el propio navegador.
- Carga la imagen. Haz clic en el área de carga y elige el archivo, arrastra la imagen encima o pégala desde el portapapeles con
Ctrl+V(Cmd+Ven Mac). Pegar es el atajo perfecto para capturas: haz la captura y pégala directamente en la página. - Usa la lupa. Al mover el cursor sobre la imagen, una lupa muestra ampliados los píxeles alrededor del puntero. Así evitas hacer clic por error en el borde de una letra o en una sombra.
- Haz clic en el píxel. El color queda fijado y los códigos aparecen en varios formatos, cada uno con su botón de copiar.
- Captura fuera de la imagen si lo necesitas. El botón «Capturar de la pantalla» abre el cuentagotas del sistema (la EyeDropper API, disponible en Chrome y Edge de escritorio) y te permite tomar el color de cualquier punto visible, incluso de otra ventana.
La herramienta también indica el color con nombre más cercano. Si hiciste clic en un azul oscuro y el resultado apunta al azul marino, la página de ese color te ofrece combinaciones y variaciones listas.
Método 2: el cuentagotas del navegador
Si desarrollas webs, tu navegador ya trae un cuentagotas integrado. Sirve para averiguar el color de cualquier cosa en una página: un botón, un fondo o una imagen.
Chrome y Edge
- Abre las DevTools con
F12oCtrl+Shift+I(Cmd+Option+Ien Mac). - En el panel de estilos de cualquier elemento, haz clic en el pequeño cuadro de color junto a una propiedad como
colorobackground-color. - En el selector de color que se abre, activa el icono del cuentagotas y haz clic en cualquier punto de la página. La propiedad toma el color capturado, y puedes cambiar el formato mostrado (HEX, RGB, HSL y otros) en el propio selector.
Ambos navegadores implementan además la EyeDropper API, que permite a una web abrir el cuentagotas del sistema con un clic. Es la API que hace posible el botón «Capturar de la pantalla» del método anterior. Todavía no existe en Firefox ni en Safari; consulta los detalles actualizados en MDN.
Firefox
Firefox tiene su propio cuentagotas en las DevTools. En el Inspector, busca el icono del cuentagotas en la barra de herramientas: al activarlo, una lupa sigue al cursor y, al hacer clic, el código HEX se copia al portapapeles. El selector de color del panel de reglas también tiene cuentagotas, igual que en Chrome.
Ten en cuenta: el cuentagotas del navegador lee el color tal como se muestra en pantalla. Si la imagen está reducida, tiene un filtro CSS o está detrás de una capa semitransparente, obtendrás el color final compuesto, no el píxel original del archivo.
Método 3: Photoshop
Photoshop te deja controlar el área de muestreo, algo muy útil con fotografías.
- Selecciona la herramienta Cuentagotas en la barra de herramientas o pulsa
I. - En la barra de opciones, ajusta el tamaño de muestra. «Muestra puntual» lee un solo píxel exacto; las opciones de promedio de 3 × 3 y 5 × 5 calculan la media de los píxeles cercanos, lo que suaviza el ruido y el grano.
- Haz clic en la imagen. El color pasa a ser el color frontal, visible en el panel Color y en la barra de herramientas.
- Haz clic en la muestra del color frontal para abrir el Selector de color. Ahí verás un campo con el código HEX (marcado con
#) y los valores RGB, HSB, Lab y CMYK, que puedes seleccionar y copiar.
Un truco: mantén pulsado el botón del ratón y arrastra con el cuentagotas para ver el color actualizarse en tiempo real; suelta cuando encuentres el tono correcto.
Método 4: Figma
En Figma, el cuentagotas está dentro del selector de color de cualquier relleno o trazo.
- Selecciona una capa y haz clic en la muestra de color del relleno, en el panel de propiedades.
- En el selector, haz clic en el icono del cuentagotas o pulsa
I. - Pasa sobre la imagen (una lupa muestra los píxeles) y haz clic. La capa recibe el color y el código HEX aparece en el campo del selector, listo para copiar.
Si solo quieres leer el color sin modificar una capa real, aplícalo a un rectángulo temporal y bórralo después. Con detalles pequeños, amplía el zoom del lienzo antes de hacer clic para acertar el píxel.
Método 5: en el móvil
En el teléfono hay dos situaciones muy distintas:
- Una imagen que ya está en el dispositivo (una foto, una captura, un diseño que te enviaron): abre el selector de color online en el navegador del móvil, sube la imagen desde la galería y toca el punto que quieras. No hace falta instalar ninguna app. El botón de capturar de la pantalla depende de la EyeDropper API, así que no está disponible en navegadores móviles.
- Un objeto del mundo real (una pared, una tela, un envase): aquí entran las apps de cámara que identifican colores, como Adobe Capture y otras similares. Te dan una referencia útil, pero la lectura depende de la luz ambiente, del balance de blancos y del procesamiento de la cámara. Una pared blanca bajo luz cálida sale amarillenta en la foto. Para un color físico exacto, lo habitual sigue siendo una carta de colores impresa o un colorímetro.
Atajos del sistema operativo
A veces el color está en una aplicación que no tiene cuentagotas. Los propios sistemas ofrecen una solución:
- Windows, PowerToys Color Picker: después de instalar PowerToys (gratuito, de Microsoft) y activar el módulo Color Picker, pulsa
Win+Shift+C. Aparece una lupa sobre la pantalla; al hacer clic, el código se copia en el formato configurado (HEX por defecto) y queda guardado en un historial. - macOS, Medidor de color digital (Digital Color Meter): viene instalado de serie, en la carpeta Utilidades dentro de Aplicaciones. Muestra en tiempo real los valores del píxel bajo el cursor. Elige en los menús de la app el espacio de color mostrado (por ejemplo, sRGB) y el formato de los valores, y usa sus propias opciones para fijar la posición y copiar el color.
Por qué el color capturado puede no coincidir
Es habitual hacer clic en dos zonas «del mismo color» y obtener códigos distintos. Estas son las causas más frecuentes:
| Causa | Qué ocurre | Cómo evitarlo |
|---|---|---|
| Compresión JPEG | El formato agrupa los píxeles en bloques y descarta detalle; aparecen variaciones y artefactos cerca de los bordes. | Usa PNG o el archivo original; haz clic en el centro de zonas planas. |
| Antialiasing | Los bordes de textos e iconos mezclan el color con el fondo para suavizar el contorno. | Usa la lupa y elige un píxel del interior de la forma, no del borde. |
| Ruido y textura | Las fotos varían de forma natural píxel a píxel. | Usa el promedio de área (3 × 3 o 5 × 5) o el extractor de paleta. |
| Perfiles de color | Una imagen en Display P3 o Adobe RGB puede convertirse a sRGB al mostrarse, y los números cambian. | Exporta en sRGB para la web y compara dentro del mismo espacio de color. |
| Monitor y modo nocturno | Los filtros de luz azul, True Tone y la calibración cambian lo que ves, no el valor del archivo. | Fíate del código, no del ojo; desactiva los filtros al comparar visualmente. |
Un ejemplo práctico: el naranja de un logotipo puede ser #FF5733, es decir, rgb(255, 87, 51). En un JPEG muy comprimido, los píxeles vecinos pueden leerse como #FE5834 o #FF5631. Una diferencia de una o dos unidades por canal es imperceptible, pero si necesitas el valor oficial de una marca, busca su manual de identidad en lugar de depender solo de la captura.
Qué hacer cuando ya tienes el color
Con el código en la mano, los siguientes pasos más habituales son:
- Extraer la paleta completa. Si la imagen es una referencia de estilo, el extractor de paleta de colores identifica los colores dominantes de una vez, sin ir píxel a píxel.
- Convertir a otro formato. El conversor de colores transforma HEX en RGB, HSL, CMYK y más. Para entender qué significa cada formato, consulta la guía de códigos de color HEX, RGB y HSL.
- Llevarlo a imprenta. Un valor capturado de la pantalla está en RGB; antes de enviarlo a imprimir, lee RGB vs CMYK.
- Crear combinaciones. A partir de un color base, la guía de armonía de colores explica cómo llegar a esquemas complementarios y análogos.
Resumen
- En la mayoría de los casos, usa el selector de color en imagen: sube o pega con
Ctrl+V, usa la lupa y haz clic. - Para colores de páginas web, el cuentagotas de las DevTools (Chrome, Edge y Firefox) lo resuelve sin salir del navegador.
- En Photoshop, pulsa
Iy elige entre muestra puntual y promedio; en Figma, pulsaIdentro del selector de color. - Para cualquier aplicación, usa PowerToys (
Win+Shift+C) en Windows o el Medidor de color digital en macOS. - Evita bordes y zonas comprimidas, promedia en fotos y revisa el espacio de color.
¿Quieres seguir explorando? Mira la lista de colores con página propia o las demás guías sobre color.