Seletor de cor online: descubra a cor de qualquer imagem

Para quem é este seletor de cor

Este seletor de cor foi pensado para quem precisa saber, com exatidão, qual é o código de uma cor que já existe em uma imagem. Você aponta para o pixel e recebe o valor pronto para usar. É útil para:

• Designers gráficos e de UI/UX, que precisam reproduzir a cor de uma referência, de um mockup ou da identidade visual de um cliente.
• Desenvolvedores front-end, que recebem um print ou um PNG em vez do arquivo de design e precisam do HEX para escrever o CSS.
• Social media e criadores de conteúdo, que querem manter posts, capas e stories na mesma paleta de cores da marca.
• Estudantes de design, arte ou tecnologia, que estão aprendendo a relação entre o que o olho vê e os números de um código de cor.
• Qualquer pessoa que queira identificar a cor de um logotipo, de uma foto de produto ou de um print de tela para usar em outro lugar.

Como usar o conta-gotas passo a passo

1. Carregue a imagem. Você pode clicar na área de envio e escolher o arquivo, arrastar e soltar a imagem sobre ela ou simplesmente colar da área de transferência com Ctrl+V (Cmd+V no Mac). Colar é o caminho mais rápido para prints: tire a captura de tela e cole direto na página.
2. Passe o mouse sobre a imagem. Uma lupa acompanha o cursor e mostra os pixels ampliados ao redor do ponto, para você ver exatamente onde vai clicar.
3. Clique no pixel. A cor é capturada e os códigos aparecem na hora em cinco formatos: HEX, RGB, HSL, HSV e CMYK. Cada um tem o próprio botão de copiar.
4. Confira o nome da cor. A ferramenta mostra a cor nomeada mais próxima, com link para a página dela, onde há mais detalhes e combinações.
5. Precisa de uma cor fora da imagem? Use o botão “Capturar da tela”. Ele aciona a EyeDropper API, disponível no Chrome e no Edge, e permite pegar a cor de qualquer ponto visível na tela, inclusive de outras janelas.

Se você quer as cores dominantes de uma foto inteira, e não de um ponto específico, o extrator de paleta faz esse trabalho automaticamente. O guia como descobrir a cor de uma imagem compara os dois métodos.

Dicas para capturar a cor exata

A cor que você vê em uma área nem sempre é a mesma em todos os pixels dela. Algumas dicas evitam surpresas.

Use o zoom e a lupa

O zoom vai de 1x a 8x. Em textos finos, ícones e bordas, amplie antes de clicar: com 4x ou mais, cada pixel fica grande o suficiente para você escolher o do meio do traço, e não o da beirada.

Cuidado com antialiasing e compressão JPEG

As bordas de letras e formas são suavizadas (antialiasing): os pixels do contorno misturam a cor do elemento com a do fundo. Por isso, clicar na borda de um logotipo costuma devolver um tom intermediário. Prefira o centro das áreas sólidas.

Arquivos JPEG têm outro problema: a compressão cria pequenas variações e “ruído” em blocos de 8×8 pixels, então uma área que deveria ser lisa pode ter pixels levemente diferentes entre si. Sempre que possível, use um PNG ou o arquivo original.

Compare alguns pontos

Em fotos, gradientes e superfícies com textura não existe uma única cor “verdadeira”. Clique em três ou quatro pontos da mesma região e compare os resultados no histórico. Se os valores forem próximos, escolha o que representa melhor a área; se variarem muito, a região é um degradê, e talvez o extrator de paleta seja a ferramenta certa.

O que fazer com a cor depois de capturar

Descobrir o código é só o começo. A ferramenta também ajuda a transformar uma cor em um conjunto utilizável.

Tons claros e escuros

São gerados 10 tons claros (tints, a cor misturada com branco) e 10 tons escuros (shades, a cor misturada com preto). Eles servem para estados de botão (hover, ativo, desabilitado), fundos suaves e bordas, sempre dentro da mesma família de cor.

Harmonias de cores

A partir da cor selecionada, a ferramenta calcula seis harmonias no círculo cromático: complementar, análoga, tríade, tetrádica, complementar dividida e monocromática. Se você não sabe qual escolher, o guia de harmonia de cores explica quando cada uma funciona melhor.

Contraste e acessibilidade

Antes de usar a cor em texto ou em um botão, confira se ela tem contraste suficiente com o fundo no verificador de contraste. Uma cor da marca pode ficar ótima em um banner e ilegível em um parágrafo.

Histórico e exportação

As últimas 14 cores capturadas ficam salvas no histórico do seu navegador, então você pode fechar a aba e continuar depois. Quando terminar, exporte a paleta em JSON, para usar em código ou em um design system, ou em PNG, para compartilhar com a equipe ou com um cliente.

HEX, RGB, HSL, HSV e CMYK em poucas palavras

Todos os formatos descrevem a mesma cor, só que de jeitos diferentes. Tome como exemplo #FF5733:

• HEX (#FF5733): três pares hexadecimais para vermelho, verde e azul. É o formato mais comum em CSS e em ferramentas de design.
• RGB (rgb(255, 87, 51)): os mesmos três canais em decimal, de 0 a 255.
• HSL (hsl(11, 100%, 60%)): matiz em graus, saturação e luminosidade. É o mais prático para criar variações à mão.
• HSV (hsv(11, 80%, 100%)): parecido com o HSL, mas usa “valor” em vez de luminosidade; é o modelo dos seletores de cor do Photoshop e do Figma.
• CMYK (cmyk(0%, 66%, 80%, 0%)): uma aproximação para impressão em ciano, magenta, amarelo e preto.

Para entender cada formato em detalhes, leia o guia de códigos de cor. Se precisar de LAB, OKLCH ou de uma variável CSS pronta, cole o código no conversor de cores.

Privacidade: sua imagem não sai do dispositivo

Todo o processamento acontece no seu navegador. A imagem é desenhada em um elemento canvas local e os pixels são lidos ali mesmo, sem upload para nenhum servidor. Por isso, você pode usar o seletor com materiais confidenciais, como layouts ainda não publicados ou prints de sistemas internos, sem que eles sejam transmitidos. O histórico de cores também fica guardado apenas no armazenamento local do navegador e pode ser apagado a qualquer momento.