Como usar um seletor de cores para encontrar cores de qualquer pixel
Resposta rápida
Para escolher uma cor: abra o Seletor de Cores, carregue uma imagem (ou use o conta-gotas da tela), clique no pixel cuja cor deseja e os valores HEX, RGB e HSL aparecerão. Todo o processamento acontece localmente – sua imagem nunca é carregada.
Introdução
Um seletor de cores (também chamado de conta-gotas) permite encontrar a cor exata de um pixel. Isso é essencial para combinar cores de marcas, tirar amostras de cores de imagens ou construir uma paleta de cores a partir de uma foto. Os seletores de cores baseados no navegador podem ler cores de imagens enviadas usando o Canvas API, e o EyeDropper API integrado do navegador pode escolher cores em qualquer lugar da tela. Este guia mostra como usar um seletor de cores em seu navegador.
Passo a passo
-
Abra a ferramenta Seletor de cores
Vá para a página da ferramenta Seletor de cores. A ferramenta oferece suporte à escolha de cores de imagens enviadas e, em navegadores compatíveis, de qualquer lugar da tela por meio do EyeDropper API.
-
Escolha sua fonte
Para escolher uma imagem: carregue ou arraste e solte uma imagem. Para escolher na tela (somente Chrome/Edge): clique no botão "Selecionar na tela" e, em seguida, clique em qualquer lugar da tela.
-
Clique no pixel para obter uma amostra
Para selecionar imagens, mova o cursor sobre a imagem e clique no pixel cuja cor deseja. A ferramenta lê a cor do pixel da tela usando getImageData(). Uma lupa pode ajudá-lo a selecionar o pixel exato.
-
Leia os valores das cores
A ferramenta exibe a cor escolhida nos formatos HEX, RGB e HSL, junto com uma amostra. Os valores são atualizados instantaneamente conforme você move o cursor.
-
Copie a cor
Clique em Copiar ao lado de qualquer formato para copiar o valor da cor para a área de transferência. Use-o em seu CSS, ferramenta de design ou aplicativo.
Exemplos
Escolha uma cor de marca em um logotipo
Entrada: logo.png, clique no pixel da cor da marca
Saída: HEX: #1a73e8, RGB: rgb(26, 115, 232), HSL: hsl(217, 89%, 51%)
Experimente uma cor de uma foto
Entrada: photo.jpg, clique em um pixel do céu
Saída: HEX: #87ceeb, RGB: rgb(135, 206, 235), HSL: hsl(197, 71%, 73%)
Escolher na tela (Chrome/Edge)
Entrada: Clique em 'Escolher na tela' e, em seguida, clique em qualquer pixel da tela
Saída: HEX valor desse pixel, por exemplo, #ff5733
Problemas comuns
- A suavização de serrilhado combina cores nas bordas — os pixels na borda entre duas cores são uma mistura. Amostra do centro de uma área de cor sólida para maior precisão.
- EyeDropper API não compatível – o seletor de tela requer Chrome 95+ ou Edge 95+. Firefox e Safari não oferecem suporte; use o método de upload de imagem.
- A compactação JPEG altera as cores — A compactação com perdas altera ligeiramente as cores dos pixels. Para cores exatas da marca, use PNG ou a fonte do vetor original.
- Diferenças de perfil de cores — imagens com perfis de cores incorporados (ICC) podem ser exibidas de maneira diferente do que sugerem seus valores brutos de pixel.
Dicas
- Use a lupa para selecionar o pixel exato – com zoom alto, você pode escolher um único pixel preciso em vez de uma borda mesclada.
- Amostra vários pixels de uma área sólida e calcula a média deles se a compactação tiver introduzido ruído — isso fornece uma cor mais representativa.
- Use o EyeDropper API (Chrome/Edge) para escolher cores de qualquer aplicativo, não apenas de imagens no navegador.
- Use nosso Seletor de cores para obter amostras instantâneas e privadas de cores — suas imagens nunca saem do seu navegador.