Cómo obtener el código hex de cualquier color en una imagen
2026-05-15
Respuesta corta: Suelta la imagen en el selector de color de ToolKoala, haz clic en el píxel que quieras y copia el valor hex (y RGB), todo en tu navegador, sin subir nada a un servidor. Es la forma más rápida de capturar el color exacto de una captura de pantalla, foto o mockup de diseño sin instalar nada.
Cómo capturar el código hex
- Abre el selector de color y arrastra tu imagen o captura de pantalla (PNG, JPG, WebP, todos funcionan).
- Mueve el cursor sobre la imagen. Una lupa ampliada muestra el píxel que estás a punto de muestrear para que no falles por uno.
- Haz clic en el píxel exacto. La herramienta lee los valores RGB de ese píxel directamente de un canvas en memoria.
- Copia el código hex (como
#3B82F6) o la cadena RGB. Repite en tantos píxeles como quieras.
Como está leyendo los datos del píxel localmente, no hay ida y vuelta a un servidor ni espera. Abre la pestaña Network de las DevTools de tu navegador mientras lo usas: verás cero peticiones de subida. Ese es el punto entero.
Para qué uso esto realmente
- Igualar un color de marca. Un cliente envía un logo como un PNG plano sin guía de marca. Muestrea el azul, obtén
#1D4ED8, listo. - Construir una paleta. Muestrea cinco o seis colores de una foto o de una captura que te gusta, y ya tienes una paleta de partida sin adivinar.
- Arreglar un desajuste. "Este botón está en un tono ligeramente equivocado": muestrea ambos, compara el hex, encuentra el valor que está fuera por poquito.
Si tu navegador es reciente (Chrome, Edge), también está la API nativa EyeDropper que puede muestrear cualquier píxel en pantalla, no solo dentro de una imagen subida. El selector de ToolKoala se apoya en un canvas en su lugar para que funcione igual en todos los navegadores y con archivos que no hayas abierto en ningún otro sitio.
Comparación honesta con otras herramientas
- Medidor de color digital de macOS — gratis, integrado en macOS. Genial para muestrear cualquier cosa en pantalla, pero por defecto usa un espacio de color raro y el flujo de copiar a hex es engorroso (tienes que hurgar en los ajustes). No hay versión para Windows.
- Cuentagotas de Chrome DevTools — gratis, ya en tu navegador. Abre el panel de Estilos, haz clic en una muestra de color, pulsa el cuentagotas. Funciona bien pero está enterrado en herramientas de desarrollo y solo muestrea la página renderizada.
- Photoshop (~$23/mes) — el cuentagotas es excelente y preciso, pero lanzar una app de más de $20 al mes para leer un píxel es excesivo.
- Extensiones de selector de color del navegador — cómodas, pero aquí está el compromiso: una extensión que puede usar el cuentagotas en cualquier página suele pedir permiso para leer cada página que visitas. Eso es mucha confianza para un selector de color. Prefiero soltar un archivo en una pestaña que no sube nada antes que darle a una extensión de fondo acceso de lectura general.
Preguntas frecuentes
¿Cómo obtengo el código hex de una captura de pantalla? Toma la captura, suéltala en un selector de color de navegador como el de ToolKoala y haz clic en el píxel que quieras. Obtienes el hex y el RGB al instante sin subir la imagen.
¿Cuál es la diferencia entre hex y RGB?
Describen el mismo color. El hex (#3B82F6) es una forma compacta de seis dígitos usada en CSS y herramientas de diseño; el RGB (59, 130, 246) lista los canales rojo/verde/azul como números. La mayoría de las herramientas, incluida esta, te dan ambos.
¿Puedo elegir un color de un sitio web en vivo en lugar de un archivo?
Sí: usa el cuentagotas de Chrome DevTools o la API nativa EyeDropper del navegador para muestreo en pantalla. Para muestrear de un archivo de imagen que ya tienes, el selector de color sin subidas es más sencillo.
¿Es exacto al píxel preciso? Sí, siempre que muestrees la imagen original. Si la imagen fue comprimida (JPG pesado) o escalada, el color que ves puede estar ya ligeramente desplazado del origen: eso es el archivo, no el selector.
— Milo 🐨