Selector de color de imagen

Cuando necesitas el color exacto, no un color parecido

Estás reconstruyendo una marca y la única referencia es un logotipo viejo. Estás ajustando un botón a la captura de un sitio que te gusta. Viste un tono en una foto y quieres usarlo en tu propio diseño. En todos los casos el problema es el mismo: tu ojo no puede leer un código hex de una pantalla. "Ese verde azulado" son en realidad una docena de verdes azulados algo distintos, y los monitores los desplazan aún más. Necesitas el número que el píxel realmente guarda.

Eso es lo que hace esta herramienta. Carga una imagen, muévete sobre ella, y una lupa sigue tu cursor mostrando los píxeles de debajo, ampliados para que puedas posarte en el preciso que quieres. Haz clic, y ese color se guarda como muestra. Cada muestra lista su valor HEX, RGB y HSL con un botón de copiar junto a cada uno, así que vas directo de un píxel en la imagen a un código en tu portapapeles.

La imagen nunca sale de tu máquina. Los píxeles se leen en local en el navegador desde un lienzo: no se sube nada, no hay cuenta, y una vez cargada la página sigue funcionando con la red apagada. Ese es el punto cuando la "imagen" es una maqueta sin lanzar, un recurso de marca de un cliente o una captura interna que no deberías entregar a una herramienta web cualquiera.

Cómo funciona en la práctica

• La lupa es para la precisión. Los logotipos y las interfaces tienen bordes duros donde el color cambia en un solo píxel; el suavizado de bordes hace que el píxel de al lado sea una mezcla turbia. La vista ampliada te deja ver exactamente en qué píxel estás antes de decidir, para que elijas el color plano de la marca y no el del borde.
• Cada clic conserva una muestra. El muestreo no es de uno en uno y se acabó. Haz clic por la imagen y cada color se apila en una lista, para que extraigas el primario de un logotipo, su acento y el color del texto en una sola pasada y los compares uno al lado del otro.
• Tres formatos, una elección. Cada muestra muestra HEX, RGB y HSL a la vez. No vuelves a muestrear para cambiar de formato: el mismo color ya está ahí en los tres, cada uno con su propio botón de copiar.

HEX, RGB, HSL: cuál copiar

Son tres formas de escribir el mismo color, y la correcta depende de adónde va.

• HEX (#3A7BD5) es lo predeterminado para la web: CSS, la mayoría de herramientas de diseño, documentos de marca. Compacto y pegable en cualquier sitio. Copia este salvo que tengas una razón para no hacerlo.
• RGB (rgb(58, 123, 213)) deletrea los canales rojo, verde y azul. Útil cuando una herramienta quiere valores de canal, cuando necesitas un alfa (rgba), o cuando razonas sobre cómo se mezcla un color.
• HSL (hsl(215, 65%, 53%)) describe tono, saturación y luminosidad. Es el que hay que usar cuando quieres ajustar un color en lugar de solo reutilizarlo: mueve la luminosidad para un estado hover, baja la saturación para una variante apagada, mantén el tono y construye una escala.

Un límite honesto, y una herramienta hermana

Este es un muestreador puntual: cada clic lee un solo píxel. En un logotipo limpio o una interfaz plana eso es exactamente lo que quieres. En una foto ruidosa —grano, degradados, artefactos JPEG— dos píxeles vecinos pueden diferir, así que elige de una zona plana y usa la lupa para evitar caer en un píxel atípico. Aquí no hay pincel de promedio de una región.

Y si no quieres elegir a mano en absoluto, img.diy tiene una herramienta de paleta aparte que escanea una imagen entera y te entrega sus colores dominantes automáticamente. Las dos responden preguntas distintas. La herramienta de paleta te dice de qué colores está hecha esta imagen; el selector de color te deja apuntar a un píxel concreto —este punto exacto del logotipo, ese botón— y tomar su valor. Recurre a la herramienta de paleta para resumir una imagen, y a esta cuando ya sabes el punto que quieres.

Carga una imagen, pasa por encima para encontrar el píxel, haz clic para conservarlo, copia el formato que necesites.