Por que a cor muda quando movo o cursor?

O JPG comprime os pixels vizinhos em blocos, então dois pixels idênticos ao olho podem carregar valores ligeiramente diferentes. Fotos também têm textura natural (pele, tecido, folhagem) - pegar um único pixel não é o mesmo que «a cor média daquela região». Clique e compare vários pixels próximos se o resultado parecer estranho.

Posso pegar a cor de uma captura?

Sim - é onde esta ferramenta brilha. Capturas costumam ter regiões de cor chapada (preenchimentos de UI, cores de marca, fundos de logo), então um único clique entrega de forma confiável o hex canônico. Capturas PNG são sem perda; capturas JPG podem ter ruído de compressão nos preenchimentos.

Como o HSL é calculado?

Conversão sRGB para HSL padrão - a mesma que o CSS usa internamente. O matiz vai em graus (0-360), saturação e luminosidade em porcentagens. O valor hex é canônico; o HSL é para designers que pensam em «uma versão mais escura disto» ou «o matiz oposto».

Seletor de cor de imagem

Solte uma imagem, clique em qualquer pixel para obter hex, RGB e HSL - e monte uma paleta enquanto seleciona.

Solte uma imagem aqui ou clique para escolher

PNG, JPG, WebP, AVIF, GIF, SVG, BMP

Solte uma imagem e passe o cursor - a pré-visualização mostra ao vivo a cor e o hex do pixel sob o ponteiro. Clique para fixar esse pixel como amostra (hex / RGB / HSL visíveis). Até 20 amostras se empilham; copie uma, ou copie a paleta inteira como bloco de variáveis CSS. Nada sai do navegador.

Como usar

Solte uma imagem
Arraste e solte ou clique na área de soltar para escolher uma captura, logo ou foto.
Passe o cursor para uma pré-visualização ao vivo
A cor e o hex do pixel sob o cursor aparecem em tempo real.
Clique para capturar
Cada clique adiciona uma amostra à paleta (hex / RGB / HSL todos visíveis).
Copie a paleta
Clique numa amostra para copiar o hex, ou copie a paleta inteira como bloco de variáveis CSS.

O que é?

Um seletor de cor de imagem lê o valor RGB de qualquer pixel de uma imagem enviada. O Canvas do navegador nos dá os dados de pixel brutos; convertemos para os três formatos que designers usam de verdade (hex para o código, RGB para softwares de pintura, HSL para raciocínio relativo). Junto com o salvamento em amostras, vira um jeito rápido de extrair a paleta exata de uma marca a partir de uma captura, foto ou do site de um concorrente.

Quando usar

Recuperar os valores hex exatos de uma marca a partir de uma captura do logo, pegar as cores dominantes de uma foto para um moodboard, casar a cor exata de um elemento de UI a partir de uma captura antiga quando a fonte se perdeu, ou encontrar a cor de destaque perfeita numa foto de banco para um hero de landing.

Erros comuns

Pegar a cor de um JPG e se surpreender com o ruído - a compressão em blocos do JPG faz um pixel não representar sua vizinhança visual. Pegar a cor de uma foto e tratar o resultado como «a cor da marca» - fotos variam naturalmente; a cor da marca vive numa fonte de preenchimento chapado. E esquecer que dois pixels vizinhos na borda de um logo podem diferir muito por causa do anti-aliasing.

FAQ

Por que a cor muda quando movo o cursor?: O JPG comprime os pixels vizinhos em blocos, então dois pixels idênticos ao olho podem carregar valores ligeiramente diferentes. Fotos também têm textura natural (pele, tecido, folhagem) - pegar um único pixel não é o mesmo que «a cor média daquela região». Clique e compare vários pixels próximos se o resultado parecer estranho.
Posso pegar a cor de uma captura?: Sim - é onde esta ferramenta brilha. Capturas costumam ter regiões de cor chapada (preenchimentos de UI, cores de marca, fundos de logo), então um único clique entrega de forma confiável o hex canônico. Capturas PNG são sem perda; capturas JPG podem ter ruído de compressão nos preenchimentos.
Como o HSL é calculado?: Conversão sRGB para HSL padrão - a mesma que o CSS usa internamente. O matiz vai em graus (0-360), saturação e luminosidade em porcentagens. O valor hex é canônico; o HSL é para designers que pensam em «uma versão mais escura disto» ou «o matiz oposto».