Image Color Picker: Extrair cores de fotos

O que é o Image Color Picker?

O Em breve: Image Color Picker é uma ferramenta baseada em navegador que permite extrair valores de cor exatos de qualquer imagem clicando diretamente nos pixels. Envie uma foto, passe o cursor sobre qualquer área para visualizar a cor em uma sobreposição de lupa em tempo real e clique para capturar os valores precisos de HEX, RGB, HSL e CMYK naquele ponto. Ao contrário das ferramentas de desenvolvimento do navegador ou das contas-gotas de área de trabalho, esta ferramenta funciona com arquivos de imagem enviados, constrói uma paleta a partir dos seus picks durante uma sessão e copia qualquer formato para a área de transferência com um clique. Tudo é executado no seu navegador. Nenhum upload para servidor, nenhuma conta necessária.

Recursos principais

• Clique para selecionar cores das imagens: Cada clique do mouse na imagem carregada captura a cor exata do pixel nessa posição, levando em conta como a imagem é dimensionada para caber na área de exibição.
• Lupa de zoom para precisão: Ao mover o cursor sobre a imagem, um quadrado de pré-visualização flutuante de 60×60 px rastreia sua posição, exibindo a cor sob o cursor e seu valor HEX para que você possa ver exatamente o que está prestes a selecionar antes de clicar.
• Extrair valores HEX, RGB, HSL, CMYK: Cada cor selecionada é exibida em todos os quatro formatos simultaneamente. O componente usa as funções de conversão rgbToHex, rgbToHsl e rgbToCmyk da biblioteca de utilitários de cor compartilhada.
• Construir paleta de cores dos picks: A ferramenta mantém até as últimas 10 cores únicas que você selecionou em uma sessão. Valores HEX duplicados são silenciosamente ignorados. Clicar na mesma cor duas vezes não adiciona uma segunda entrada.
• Rastreamento do histórico de cores: Swatches de paleta clicados permitem revisar qualquer cor selecionada anteriormente e ver todos os quatro valores de formato novamente sem re-selecionar.
• Copiar cores com um clique: Cada linha de formato no painel de cor atual tem seu próprio botão de cópia. Um botão "Copy All Colors" exporta toda a paleta da sessão como uma lista separada por vírgulas de valores HEX.
• Processamento 100% no lado do cliente: A imagem é desenhada em um elemento canvas HTML5 oculto. Todas as leituras de pixels usam getImageData() localmente. Nenhum dado sai do seu navegador.
• Funciona com qualquer formato de imagem: A entrada de arquivo usa accept="image/*", então qualquer formato que seu navegador possa decodificar (JPEG, PNG, WebP, GIF, AVIF, SVG) é compatível.

Como usar o Image Color Picker

Passo 1: Envie sua imagem

Abra o Em breve: Image Color Picker. Você verá um painel de upload com uma zona de soltar pontilhada. Clique na zona para abrir um seletor de arquivos ou arraste e solte um arquivo de imagem diretamente sobre ela. Quando a imagem carrega com sucesso, a ferramenta exibe uma notificação toast "Image loaded" e limpa quaisquer cores selecionadas anteriormente.

Passo 2: Passe o cursor para visualizar cores

Assim que sua imagem aparecer, mova o cursor sobre qualquer área. Um quadrado de cor flutuante de 60×60 px segue seu cursor, ligeiramente deslocado para cima à direita para não obscurecer o pixel que você está inspecionando. O quadrado é preenchido com a cor ao vivo sob seu cursor e exibe seu valor HEX em texto contrastante. Esta lupa desaparece quando você move o cursor para fora da imagem.

Passo 3: Clique para capturar uma cor

Clique em qualquer ponto da imagem para fixar aquela cor. O painel "Current Color" aparece abaixo da imagem mostrando:

• Um grande swatch de cor com o valor HEX centralizado em texto contrastante
• Quatro linhas para HEX, RGB, HSL e CMYK — cada uma com um botão de cópia

Por exemplo, clicar em um céu de meio-tom em uma fotografia pode produzir:

HEX:  #6fa8dc
RGB:  rgb(111, 168, 220)
HSL:  hsl(210, 59%, 65%)
CMYK: cmyk(50%, 24%, 0%, 14%)

Passo 4: Construa uma paleta

Continue clicando em diferentes áreas da imagem. Cada cor única que você seleciona aparece como um swatch no painel "Picked Palette" na parte inferior. Clique em qualquer swatch para recarregá-lo como a cor ativa atual e ver todos os seus valores novamente. A paleta mantém até 10 cores únicas por sessão.

Passo 5: Copie suas cores

Copie o valor de um formato único usando o botão de cópia em sua linha. Para exportar a paleta completa, clique em "Copy All Colors" — isso grava todos os valores HEX na sua área de transferência como uma string separada por vírgulas, como #6fa8dc, #2d5f8e, #f4c842, #e8573a. Carregue uma nova imagem com a zona de upload a qualquer momento; a paleta é reiniciada automaticamente.

Exemplos práticos

Combinar cores de marca de um logotipo

Você tem um PNG do logotipo da sua empresa e precisa das cores exatas da marca para uma folha de estilos CSS. Envie o logotipo, passe o cursor sobre a cor primária da marca e clique para capturá-la. Em seguida, selecione as cores secundárias e de destaque. Use "Copy All Colors" para obter uma lista separada por vírgulas de todos os valores hexadecimais que você selecionou e cole-os diretamente nas suas variáveis CSS :root.

Samplear uma paleta de cores de uma fotografia

Uma fotografia de produto tem um esquema de cores natural que você quer usar para um design de interface. Envie a foto e clique sistematicamente nas cores dominantes — o tom de fundo, o destaque do produto, uma área de sombra e um detalhe de destaque. O painel de paleta acumula até 10 swatches únicos. Quando concluído, clique em cada swatch para recuperar o valor RGB para uso em ferramentas de design que aceitam entradas de cor numéricas.

Identificar uma cor de pixel específica para relatórios de bugs

Uma interface tem uma cor de texto incorreta em um estado particular de botão e você tem uma captura de tela. Envie a captura de tela, passe o cursor sobre o texto do botão e clique. Copie o valor HEX e inclua-o no seu relatório de bug ao lado do valor esperado. Isso elimina a ambiguidade sobre qual cor exata está sendo renderizada incorretamente.

Dicas e melhores práticas

Use imagens de alta resolução quando a precisão importa. A ferramenta mapeia a posição do cursor para as coordenadas reais de pixel da imagem usando um fator de escala baseado no tamanho renderizado versus o tamanho do canvas, então dar zoom em um detalhe no seu editor de imagens antes de exportar fornece mais pixels endereçáveis por área visual.

A lupa mostra o valor HEX antes de clicar. Use isso para confirmar que você está exatamente no pixel correto em vez de em um pixel de borda anti-aliased adjacente, o que é especialmente importante ao samplear de texto ou linhas finas.

A paleta ignora valores HEX duplicados. Se você quiser comparar duas cores visualmente similares que diferem por um único canal, selecione uma, anote seus valores e depois selecione a outra.

Ao copiar todas as cores da paleta, a saída são valores HEX separados por vírgulas. Cole isso diretamente na entrada hexadecimal do Em breve: Palette Generator para explorar variações de harmonia nas suas cores extraídas.

Problemas comuns e solução de problemas

Toast "Load error" após selecionar um arquivo: A imagem falhou ao decodificar após a leitura. Isso geralmente acontece com arquivos corrompidos ou formatos que o navegador não consegue analisar (alguns arquivos TIFF e RAW de câmera). Converta a imagem para JPEG ou PNG e tente novamente.

Clicar não produz cor / a lupa não aparece: Isso ocorre se o canvas não foi inicializado corretamente. Recarregue a ferramenta e re-envie a imagem. Se a imagem for muito grande (mais de 8000×8000 pixels), alguns navegadores limitam o tamanho do canvas — redimensione a imagem antes de enviar.

Todas as cores selecionadas parecem idênticas: Você pode estar clicando em uma área uniforme (fundo, preenchimento sólido). Dê zoom na imagem em um editor de fotos para encontrar áreas com mais detalhes e envie essa versão recortada.

Swatch de paleta não responde ao clique: Apenas as 10 cores únicas selecionadas mais recentemente são mantidas. Se você já selecionou 10 cores, as cores únicas subsequentes substituem a entrada mais antiga. Clicar em um swatch sempre funciona para recarregar a cor. Se a paleta parecer sem resposta, verifique se seu clique caiu no swatch e não no espaço entre os swatches.

Arrastar e soltar não funciona: A zona de soltar verifica se file.type.startsWith('image/'). Arquivos sem tipo MIME ou com tipos incorretos são silenciosamente ignorados. Use o método de clicar para navegar como alternativa.

Privacidade e segurança

O Image Color Picker processa seus arquivos completamente dentro do seu navegador. Quando você envia uma imagem, ela é lida como uma URL de dados usando a API FileReader e desenhada em um elemento canvas oculto. Nenhum dado é transmitido para qualquer servidor. Suas imagens nunca saem do seu dispositivo. A ferramenta funciona sem conexão à internet depois que a página foi carregada, tornando-a segura para fotografias confidenciais, ativos de design proprietários e capturas de tela internas.

Perguntas frequentes

O Image Color Picker é gratuito?

Sim, o Image Color Picker é completamente gratuito sem limites de uso. Você não precisa de conta, assinatura ou pagamento para usá-lo. A ferramenta está disponível no Em breve: Glyph Widgets e funciona diretamente no seu navegador.

O Image Color Picker funciona offline?

Sim. Uma vez que a página foi carregada, todo o processamento usa a API Canvas HTML5 localmente. Você pode desconectar da internet e continuar selecionando cores de imagens sem interrupção. A ferramenta não faz solicitações de rede durante o uso normal.

Meus dados estão seguros com o Image Color Picker?

Suas imagens são processadas completamente no lado do cliente usando FileReader e getImageData(). Nenhum dado de imagem é enviado para qualquer servidor. O Glyph Widgets não tem acesso ao conteúdo de arquivos que você abre com esta ferramenta.

Quais formatos de cor a ferramenta produz?

A ferramenta produz quatro formatos para cada cor selecionada: HEX (ex.: #6fa8dc), RGB (ex.: rgb(111, 168, 220)), HSL (ex.: hsl(210, 59%, 65%)) e CMYK (ex.: cmyk(50%, 24%, 0%, 14%)). Cada formato tem seu próprio botão de cópia.

Quantas cores posso selecionar em uma sessão?

A paleta mantém as últimas 10 cores únicas selecionadas. Valores HEX duplicados não são armazenados novamente. Clicar na mesma cor uma segunda vez não tem efeito na contagem da paleta. Carregar uma nova imagem redefine a paleta para vazia.

Quais formatos de imagem são compatíveis?

A entrada de arquivo aceita qualquer formato de imagem que seu navegador possa decodificar, usando o atributo accept="image/*". Na prática, isso inclui JPEG, PNG, WebP, GIF, AVIF e SVG. Formatos como RAW ou TIFF que os navegadores não conseguem decodificar nativamente produzirão um erro de carregamento.

Posso selecionar cores da mesma imagem novamente após copiar?

Sim. A imagem permanece carregada na ferramenta até que você a limpe ou carregue uma nova. Você pode continuar clicando, construindo sua paleta e copiando cores por quanto tempo quiser sem re-enviar.

Quão precisa é a amostragem de cores?

A ferramenta lê exatamente um pixel na posição clicada usando getImageData(x, y, 1, 1). O mapeamento de escala entre o tamanho da imagem exibida e as dimensões reais do canvas é calculado a partir de getBoundingClientRect(), então o resultado reflete com precisão a verdadeira cor do pixel naquela posição, mesmo quando a imagem é exibida em um tamanho diferente de sua resolução nativa.

Para que serve a lupa?

A pré-visualização de lupa flutuante mostra a cor atual sob seu cursor antes de você confirmar uma seleção. Isso ajuda a identificar exatamente qual pixel você está prestes a samplear, particularmente útil ao longo de bordas de cor, gradientes ou bordas anti-aliased onde pixels adjacentes diferem significativamente.

Posso exportar a paleta completa em uma única ação?

Clicar em "Copy All Colors" grava todos os valores HEX selecionados na sua área de transferência como uma lista separada por vírgulas. Você pode então colar isso em ferramentas de design, variáveis CSS ou no Em breve: Palette Generator para trabalho de cor adicional.

Ferramentas relacionadas

• Em breve: Palette Generator — Gere harmonias de cor complementares, análogas, triádicas e outras a partir de uma cor base que você extraiu com o picker.
• Color Converter — Converta entre HEX, RGB, HSL, CMYK e outros formatos com total precisão.
• Contrast Checker — Verifique as taxas de contraste de acessibilidade WCAG entre duas cores da sua paleta.
• Color Picker — Selecione uma cor diretamente sem uma imagem, usando uma roda de cores e controles deslizantes.

Experimente o Image Color Picker agora: Em breve: Glyph Widgets Image Color Picker