Selector de color de una imagen - Consigue el código HEX de cualquier píxel

Qué hace este selector de color

Esto es un cuentagotas, no un generador de paletas: tú decides qué píxel se muestrea y la herramienta informa exactamente de lo que hay almacenado ahí. La parte que merece explicación es cómo se toma una lectura, porque el enfoque obvio es sutilmente erróneo. Dibujar la imagen entera en un lienzo y leer los píxeles de vuelta falla con fotos grandes: los navegadores limitan el área total del lienzo a unos 16,7 millones de píxeles, alrededor de 4096 por 4096, y un archivo de cámara de 24 megapíxeles lo supera de sobra. Reducir la imagen para que quepa haría que cada muestra fuese la media de varios píxeles originales, así que lo único que un cuentagotas debe acertar sería lo primero en perderse. En su lugar, el muestreo redibuja solo una ventana pequeña alrededor del puntero, directamente desde el archivo descodificado y exactamente a escala 1 a 1. El rectángulo de origen y el de destino tienen el mismo tamaño, así que el navegador copia píxeles en lugar de remuestrearlos, y los valores que obtienes son los propios bytes del archivo por grande que sea la imagen. La vista previa que ves puede estar escalada para caber en el límite del lienzo o en tu pantalla, pero nunca se muestrea de ella. Esa misma ventana alimenta la lupa, que pinta cada píxel de origen como un cuadrado de 13 píxeles con líneas de rejilla entre ellos y perfila la celda central en blanco y negro para que siga siendo visible sobre cualquier color. La necesitas: una foto de 4000 píxeles de ancho colocada en una columna de 720 píxeles pone unos 5,6 píxeles de imagen bajo cada píxel de pantalla. Las flechas mueven la muestra exactamente un píxel de origen y Mayús más una flecha, diez, que es la única manera fiable de acertar en un borde de un píxel o en un contorno fino suavizado. Cada selección informa del HEX, el RGB y el HSL calculados a partir del mismo triplete de 8 bits, además de HEXA de 8 dígitos y RGBA cuando el píxel no es totalmente opaco. El límite real que conviene conocer es la gestión de color: el lienzo descarta el perfil ICC incrustado en la mayoría de navegadores, así que los valores coinciden con lo que pinta el navegador y no con lo que muestra un editor con gestión de color.