Cuentagotas de color para imágenes: códigos HEX y RGB
La paleta sale de unos 10.000 píxeles de muestra, no de todos. El cuentagotas de color para imágenes hace dos cosas: con un clic te da el código HEX y RGB del píxel que señalas, y además propone hasta ocho colores frecuentes de la imagen. Sirve para igualar un botón con el logo de una captura, leer el azul exacto de un gráfico exportado como imagen o encontrar el tono del cielo de una foto para que un texto encaje.
Cómo se forma la paleta
Del conjunto de muestras se descartan los píxeles casi transparentes. Cada canal se redondea a pasos de 16, se cuentan los grupos y se muestran los ocho más frecuentes. Por eso un color de la paleta puede diferir hasta 8 por canal del píxel real. Si necesitas el valor exacto, haz clic en la imagen.
Del archivo al portapapeles
- Haz clic en la zona de carga o arrastra una imagen. El selector acepta cualquier tipo de imagen que tu navegador pueda abrir; PNG, JPG y WebP son la opción segura.
- Haz clic en un punto de la imagen. El cuadro grande muestra el color y se rellenan los campos HEX y RGB.
- Pulsa el botón de copiar junto a Código HEX o Código RGB para llevar el valor al portapapeles.
- Un clic en una muestra de la paleta la convierte en el color actual y copia también su código HEX.
- Pulsa Otra imagen para empezar con un archivo nuevo.
Lo que el cuentagotas no hace
- No muestra una vista previa al pasar el ratón. Solo se elige con clic.
- Solo da HEX y RGB, sin HSL ni valor alfa.
- Cada clic lee un único píxel en el tamaño original del archivo, aunque la vista previa se limita a 400 píxeles de alto. En una foto con ruido, dos vecinos pueden diferir varios pasos. Si el valor te parece raro, haz otro clic.
Una imagen muy grande tarda un momento en analizarse, porque la imagen entera se lee una vez para la paleta.
Qué pasa con tu imagen
El archivo se lee con FileReader y se dibuja en un canvas dentro del navegador. Los píxeles se leen de ese canvas con getImageData. Abrir una imagen o hacer clic en un color no envía ninguna petición. Puedes comprobarlo en la pestaña de red de las herramientas de desarrollo. El portapapeles solo se usa cuando pulsas un botón de copiar o haces clic en una muestra.