Cuentagotas online: saca el color de cualquier imagen

¿Qué es un selector de color desde una imagen?

Un selector de color desde una imagen es una herramienta que te deja hacer clic en cualquier punto de una foto, un logo o una captura de pantalla y te devuelve el código exacto de ese píxel: su hex, su rgb() y su hsl(). Es lo mismo que hace el cuentagotas de Photoshop o Figma, pero sin tener que abrir esos programas ni instalar nada: solo cargas la imagen en el navegador y sacas el color que necesitas en un par de segundos.

Sirve para esos momentos en los que tienes el color delante de los ojos pero no su código: un tono de marca en un logo que te han pasado por WhatsApp, el azul exacto de una captura, o el verde de una foto que quieres usar en una web. En vez de abrir un editor pesado para una tarea de diez segundos, arrastras la imagen aquí, haces clic y ya tienes el hex listo para pegar en tu CSS o tu documento de diseño.

Cómo usarlo

1. Carga tu imagen. Pulsa “Elegir una imagen”, arrástrala directamente a la zona marcada, o pégala desde el portapapeles con Ctrl+V (Cmd+V en Mac) justo después de copiarla.
2. Mueve el cursor y haz clic para tomar un color. Mientras te desplazas por la imagen, una muestra en vivo te enseña el hex del punto que tienes bajo el cursor. Al hacer clic, ese píxel queda como tu color elegido: aparece en un panel con una muestra grande, botones para copiar su hex, su rgb() y su hsl(), y un distintivo con el color con nombre más parecido de entre 220, que enlaza a su página de tonos.
3. Reutiliza la paleta y tus últimos colores. Debajo de la imagen aparecen automáticamente los ocho colores más frecuentes de la foto, y una fila de “Elegidos recientes” guarda los últimos que has tomado tú; haz clic en cualquiera para volver a seleccionarlo. Cuando termines, pulsa “Quitar imagen” para borrarlo todo y empezar con otra.

Para qué se usa

El uso más habitual es sacar el color de marca de un logo o de una captura: te pasan el logotipo de un cliente en PNG y necesitas el hex exacto para replicarlo en una web o una presentación, sin adivinar a ojo ni abrir un editor de imágenes solo para eso. También es la forma más rápida de montar una paleta a partir de una foto: eliges varios puntos de la imagen (un cielo, una pared, una prenda de ropa) y los vas guardando en “Elegidos recientes” hasta tener una combinación de colores coherente.

Es igual de útil cuando quieres que una web, una tienda online o una landing combinen con una imagen concreta, por ejemplo un fondo de cabecera o la foto de un producto: sacas su color dominante y lo usas como acento en botones o enlaces. Y en trabajo de diseño y presentaciones ahorra tiempo cuando necesitas igualar un tono entre diapositivas, documentos o maquetas sin depender de tener Photoshop o Figma abiertos.

Limitaciones honestas

La imagen nunca sale de tu navegador: se dibuja en un elemento canvas y se lee píxel a píxel con JavaScript, sin subir nada a ningún servidor ni guardar copia al cerrar la pestaña. Pero eso significa que lo que se muestrea es lo que el navegador ha decodificado, no la escena original: en un JPEG la compresión ya ha desplazado un poco los colores, sobre todo cerca de bordes marcados, así que un hex tomado justo al lado de un borde puede diferir levemente del color real de la foto. Las imágenes con gama amplia (por ejemplo una toma en Display P3 de un móvil reciente) también se convierten a sRGB al dibujarse, así que el hex que obtienes es una aproximación en sRGB de un original más amplio de lo que puede representar ese código.

El muestreo sí lee la imagen a resolución completa, no la versión reducida que ves en pantalla, así que el clic cae en el píxel real del archivo. Los ocho colores de la paleta automática, en cambio, se calculan agrupando píxeles parecidos en cubos, contándolos y promediando cada cubo: es una aproximación rápida a los colores dominantes, no un agrupamiento perceptual, así que una zona pequeña de color muy vivo puede quedarse fuera de la lista mientras domina un fondo apagado. Y en formatos animados se muestrea el fotograma que esté visible en ese momento, mientras que los píxeles totalmente transparentes devuelven esa transparencia en lugar de un color de debajo.

¿Por qué es gratis?

Porque todo el trabajo lo hace tu propio navegador: la imagen se dibuja y se lee en tu equipo, nunca se sube a ningún servidor, así que no hay coste de almacenamiento ni motivo para pedirte una cuenta. No necesitas registrarte, no hay marca de agua en los colores que copias y no hay límite de usos: es una herramienta pensada para resolver esa tarea puntual de sacar un color, sin fricción de por medio.