Seletor de Cor de Imagem

Quando você precisa da cor exata, não de uma cor que está perto

Você está reconstruindo uma marca e a única referência é um logotipo antigo. Você está combinando um botão com a captura de um site de que gosta. Você viu um tom numa foto e quer usá-lo no seu próprio design. Em todos os casos o problema é o mesmo: seu olho não consegue ler um código hexadecimal de uma tela. "Aquele verde-azulado" são na verdade uma dúzia de verdes-azulados ligeiramente diferentes, e os monitores os deslocam ainda mais. Você precisa do número que o pixel de fato guarda.

É isso que esta ferramenta faz. Carregue uma imagem, mova-se sobre ela, e uma lupa segue seu cursor mostrando os pixels por baixo, ampliados para você acertar exatamente o que quer. Clique, e essa cor é salva como uma amostra. Cada amostra lista seu valor HEX, RGB e HSL com um botão de copiar ao lado de cada um, então você vai direto de um pixel na imagem a um código na sua área de transferência.

A imagem nunca sai da sua máquina. Os pixels são lidos localmente no navegador a partir de um canvas — nada é enviado, não há conta, e uma vez que a página tenha carregado, continua funcionando com a rede desligada. Esse é o ponto quando a "imagem" é um protótipo não lançado, o ativo de marca de um cliente ou uma captura interna que você não deveria estar entregando a uma ferramenta web qualquer.

Como funciona na prática

• A lupa é para precisão. Logotipos e interfaces têm bordas duras onde a cor muda ao longo de um único pixel — o anti-serrilhamento faz o pixel vizinho ser uma mistura confusa. A visão ampliada deixa você ver exatamente em qual pixel está antes de confirmar, para pegar a cor de marca chapada e não a borda.
• Cada clique guarda uma amostra. A amostragem não é uma-por-vez-e-acabou. Clique pela imagem e cada cor se empilha numa lista, para você extrair a cor primária de um logotipo, seu destaque e a cor do texto numa passagem e compará-las lado a lado.
• Três formatos, uma escolha. Cada amostra mostra HEX, RGB e HSL de uma vez. Você não reamostra para mudar o formato — a mesma cor já está ali nos três, cada um com seu próprio botão de copiar.

HEX, RGB, HSL — qual copiar

São três formas de escrever a mesma cor, e a certa depende de para onde ela vai.

• HEX (#3A7BD5) é o padrão para a web — CSS, a maioria das ferramentas de design, documentos de marca. Compacto e colável em qualquer lugar. Copie este a menos que tenha um motivo para não copiar.
• RGB (rgb(58, 123, 213)) soletra os canais vermelho, verde e azul. Útil quando uma ferramenta quer valores de canal, quando você precisa de um alfa (rgba) ou quando está raciocinando sobre como uma cor é misturada.
• HSL (hsl(215, 65%, 53%)) descreve matiz, saturação e luminosidade. É o que buscar quando você quer ajustar uma cor em vez de só reutilizá-la — mexa na luminosidade para um estado de hover, baixe a saturação para uma variante mais discreta, mantenha o matiz e construa uma escala.

Um limite honesto, e uma ferramenta irmã

Este é um amostrador pontual: cada clique lê um único pixel. Num logotipo limpo ou numa interface chapada, é exatamente o que você quer. Numa foto ruidosa — grão, degradês, artefatos de JPEG — dois pixels vizinhos podem diferir, então escolha de uma área chapada e use a lupa para evitar cair num ponto fora da curva. Não há aqui um pincel de média de uma região.

E se você não quiser escolher à mão de forma nenhuma, o img.diy tem uma ferramenta de paleta separada que varre uma imagem inteira e te entrega as cores dominantes dela automaticamente. As duas respondem a perguntas diferentes. A ferramenta de paleta te diz de quais cores esta imagem é feita; o seletor de cores deixa você apontar para um pixel específico — este ponto exato do logotipo, aquele botão — e pegar o valor dele. Recorra à ferramenta de paleta para resumir uma imagem, e a esta quando você já sabe o ponto que quer.

Carregue uma imagem, passe o cursor para achar o pixel, clique para guardá-lo, copie o formato que precisa.