Você tem uma imagem e precisa de um número dela: o código hex de uma cor específica. Talvez seja um logotipo cuja especificação de marca se perdeu há muito tempo, uma captura de tela de um site cujo azul você quer combinar ou uma foto com um tom que você gostaria de reutilizar. Digitar o que você acha que a cor é não funciona — seu olho não consegue ler #3A7BD5 de uma tela, e a cor que parece certa geralmente está a alguns dígitos de distância. Veja como ler o valor real direto dos pixels.
Por que chutar nunca funciona direito
Um único "azul" na tela é, na verdade, um espalhamento de azuis quase idênticos, e o brilho e a calibração do seu monitor os deslocam ainda mais. Escolha a olho e você acerta perto, mas errado — perto o suficiente para o descompasso ser irritante mas não óbvio, então você queima dez minutos se perguntando por que o botão não combina com o cabeçalho. A solução é parar de chutar e ler o número que o pixel realmente armazena.
Obtenha o código em três passos
O jeito confiável é amostrar o pixel diretamente com um seletor de cor.
- Carregue a imagem. Solte o logotipo, a captura de tela ou a foto de onde você está puxando.
- Passe o cursor até o pixel exato. Uma lupa segue seu cursor e amplia a área embaixo, então, numa borda dura, você consegue ver qual pixel é a cor chapada da marca e qual é uma mistura suavizada de duas.
- Clique para salvar e depois copie. Cada clique guarda a cor como uma amostra mostrando seu HEX, RGB e HSL, cada um com seu próprio botão de copiar. Clique no HEX e ele está na sua área de transferência.
Acerte o pixel certo
A lupa importa mais do que parece. Onde uma cor encontra outra — uma letra contra um fundo, a borda de um ícone — os pixels no meio são suavizados: uma mistura amaciada das duas cores, não uma delas. Amostre ali e você obtém um valor lamacento que não combina com nada. Mire em uma área chapada a alguns pixels dentro da forma, onde a cor é sólida, e a visão ampliada te deixa confirmar que você está nela antes de clicar.
Num logotipo limpo ou numa interface chapada isso é fácil — a cor é uniforme por uma área larga. Numa foto exige mais cuidado, porque grão e compressão fazem os pixels vizinhos genuinamente diferirem. Escolha de uma região calma e uniformemente iluminada e tire algumas amostras para checar se elas concordam.
HEX, RGB ou HSL — pegue o que couber
Cada amostra te dá os três de uma vez, então você copia o que o seu destino quiser:
- HEX (
#3A7BD5) — o padrão da web. CSS, Figma, Canva, documentos de marca. Copie este a menos que tenha um motivo para não fazê-lo. - RGB (
rgb(58, 123, 213)) — valores de canal, úteis quando uma ferramenta os pede ou você precisa de transparência viargba. - HSL (
hsl(215, 65%, 53%)) — matiz, saturação, luminosidade. Melhor quando você quer ajustar a cor: clareá-la para um estado de hover, apagá-la para uma variante ou construir uma escala a partir dela.
Como toda amostra carrega os três, você nunca reamostra só para trocar de formato.
Pegando várias cores de uma vez
Um logotipo raramente é uma cor só. Clique na primária, no destaque e na cor do texto numa única passada — cada uma se empilha na lista para você compará-las e copiá-las uma após a outra, em vez de carregar a imagem três vezes separadas.
Se você quer um resumo de cor de uma imagem inteira em vez de pixels específicos — a paleta geral da qual uma foto é feita — isso é um trabalho diferente, e a ferramenta de paleta separada do img.diy extrai automaticamente as cores dominantes para você. Use este seletor quando você sabe o ponto exato que quer; use a ferramenta de paleta quando quer a imagem caracterizada para você.
Fica no seu dispositivo
A imagem é lida localmente no seu navegador a partir de um canvas — nada é enviado, não há cadastro e, depois do primeiro carregamento, funciona offline. Então uma maquete não lançada ou o recurso privado de um cliente nunca sai da sua máquina só porque você precisou de um código hex dela.
Carregue a imagem, passe o cursor até o pixel, clique e copie o código.