Tienes una imagen y necesitas un número de ella: el código hex de un color concreto. Quizá sea un logo cuya especificación de marca desapareció hace tiempo, una captura de un sitio cuyo azul quieres igualar, o una foto con un tono que te gustaría reutilizar. Escribir lo que crees que es el color no funciona — tu ojo no puede leer #3A7BD5 en una pantalla, y el color que parece correcto suele estar unos dígitos desviado. Aquí tienes cómo leer el valor real directamente de los píxeles.
Por qué adivinar nunca funciona del todo
Un solo "azul" en pantalla es en realidad una gama de azules casi idénticos, y el brillo y la calibración de tu monitor los desplazan más aún. Elige a ojo y aterrizas cerca pero mal — lo bastante cerca como para que el desajuste sea molesto pero no obvio, así que pierdes diez minutos preguntándote por qué el botón no coincide con la cabecera. El arreglo es dejar de adivinar y leer el número que el píxel almacena de verdad.
Consigue el código en tres pasos
La forma fiable es muestrear el píxel directamente con un selector de color.
- Carga la imagen. Suelta el logo, la captura o la foto de la que estás sacando.
- Pasa el cursor al píxel exacto. Una lupa sigue tu cursor y amplía la zona de debajo, así que en un borde duro puedes ver qué píxel es el color plano de marca y cuál es una mezcla suavizada de dos.
- Haz clic para guardar, luego copia. Cada clic conserva el color como una muestra que muestra su HEX, RGB y HSL, cada uno con su propio botón de copiar. Haz clic en el HEX y está en tu portapapeles.
Aterriza en el píxel correcto
La lupa importa más de lo que parece. Donde un color se encuentra con otro — una letra contra un fondo, el borde de un icono — los píxeles intermedios están suavizados: una mezcla difuminada de los dos colores, no cualquiera de ellos. Muestrea ahí y obtienes un valor turbio que no coincide con nada. Apunta a una zona plana unos píxeles dentro de la forma, donde el color es sólido, y la vista ampliada te deja confirmar que estás sobre él antes de hacer clic.
En un logo limpio o una interfaz plana esto es fácil — el color es uniforme en una zona amplia. En una foto requiere más cuidado, porque el grano y la compresión hacen que los píxeles vecinos difieran de verdad. Elige de una región tranquila y uniformemente iluminada y toma un par de muestras para comprobar que coinciden.
HEX, RGB o HSL — coge lo que encaje
Cada muestra te da los tres a la vez, así que copias el que quiera tu destino:
- HEX (
#3A7BD5) — el estándar de la web. CSS, Figma, Canva, documentos de marca. Copia este salvo que tengas una razón para no hacerlo. - RGB (
rgb(58, 123, 213)) — valores de canal, útil cuando una herramienta los pide o necesitas transparencia mediantergba. - HSL (
hsl(215, 65%, 53%)) — tono, saturación, luminosidad. Mejor cuando quieres ajustar el color: aclararlo para un estado al pasar el cursor, apagarlo para una variante, o construir una escala a partir de él.
Como cada muestra lleva los tres, nunca vuelves a muestrear solo para cambiar de formato.
Coger varios colores a la vez
Un logo rara vez es un solo color. Haz clic en el primario, el acento y el color del texto de una sola pasada — cada uno se apila en la lista para que puedas compararlos y copiarlos uno tras otro, en lugar de cargar la imagen tres veces por separado.
Si quieres un resumen de color de toda una imagen en lugar de píxeles concretos — la paleta general de la que está construida una foto — ese es un trabajo distinto, y la herramienta de paleta aparte de img.diy extrae automáticamente los colores dominantes por ti. Usa este selector cuando sepas el punto exacto que quieres; usa la herramienta de paleta cuando quieras que la imagen se caracterice por ti.
Se queda en tu dispositivo
La imagen se lee localmente en tu navegador desde un canvas — no se sube nada, no hay registro, y tras la primera carga funciona sin conexión. Así que una maqueta sin lanzar o un recurso privado de un cliente nunca sale de tu máquina solo porque necesitabas un código hex de ella.
Carga la imagen, pasa el cursor al píxel, haz clic y copia el código.