Conta-gotas de Cores de Imagem - Pegue o Código HEX de Qualquer Pixel

O Que Este Conta-gotas de Cores Faz

Isto é um conta-gotas, não um gerador de paleta: você decide qual pixel é amostrado, e a ferramenta informa exatamente o que está guardado ali. A parte que vale explicar é como uma leitura é feita, porque o caminho óbvio é sutilmente errado. Desenhar a imagem inteira em um canvas e ler os pixels de volta dali falha em fotos grandes - os navegadores limitam a área total do canvas a cerca de 16,7 milhões de pixels, algo como 4096 por 4096, e um arquivo de câmera de 24 megapixels passa disso com facilidade. Reduzir a imagem para caber faria de cada amostra uma média de vários pixels originais, então a única coisa que um conta-gotas precisa acertar seria a primeira a se perder. Em vez disso, a amostragem redesenha apenas uma pequena janela ao redor do ponteiro, direto do arquivo decodificado, exatamente em 1 para 1. O retângulo de origem e o de destino têm o mesmo tamanho, então o navegador copia pixels em vez de reamostrá-los, e os valores que você recebe são os próprios bytes do arquivo, por maior que a imagem seja. A pré-visualização que você vê pode estar reduzida para caber no limite do canvas ou na sua tela, mas nada é amostrado a partir dela. Essa mesma janela alimenta a lupa, que pinta cada pixel de origem como um quadrado de 13 pixels com linhas de grade entre eles e contorna a célula central em preto e branco para que ela continue visível sobre qualquer cor. Você precisa disso: uma foto de 4000 pixels de largura exibida em uma coluna de 720 pixels coloca cerca de 5,6 pixels de imagem sob cada pixel da tela. As setas movem a amostra exatamente um pixel de origem, e Shift mais uma seta move dez, que é a única maneira confiável de acertar uma borda de um pixel ou um contorno fino suavizado. Cada escolha informa HEX, RGB e HSL a partir do mesmo trio de 8 bits, mais HEXA de 8 dígitos e RGBA quando o pixel não é totalmente opaco. O limite real a conhecer é o gerenciamento de cores: o canvas descarta o perfil ICC embutido na maioria dos navegadores, então os valores correspondem ao que o navegador pinta, não ao que um editor com gerenciamento de cores mostra.