Sobre a ferramenta: Extrair cor de imagem
Esta ferramenta é um conta-gotas online que mostra o código exato das cores de uma foto. É útil para pegar a cor da marca de um logotipo ou de um site, ou montar uma paleta de design com as cores de uma foto de que você gosta. A lupa permite escolher com precisão de pixel, e no celular, ao manter o dedo pressionado e mover, a lupa aparece acima do dedo para não ficar escondida.
A imagem é processada só no navegador e não é enviada para nenhum servidor.
Como usar
- Arraste uma imagem para a caixa acima ou toque nela para escolher. Capturas de tela podem ser coladas direto com Ctrl+V.
- Toque no ponto desejado da imagem. Use a lupa para conferir a posição.
- Toque em Copiar ao lado do código HEX, RGB ou HSL e cole na sua ferramenta de design ou no CSS.
- Na Paleta de cores principais abaixo, veja as cores predominantes e suas proporções; toque em uma cor para copiá-la.
Como ler os códigos de cor
- HEX (#4F46E5): vermelho, verde e azul em dois dígitos hexadecimais cada. Usado na web e no Figma.
- RGB (rgb(79, 70, 229)): vermelho, verde e azul de 0 a 255. Usado no Photoshop e no PowerPoint.
- HSL (hsl(243, 75%, 59%)): matiz, saturação e luminosidade. Prático para criar variações de cor no CSS.
Como a paleta é gerada?
A imagem é reduzida e as cores parecidas são agrupadas pelo método de agrupamento k-means, que encontra até 8 cores que ocupam a maior área. O número abaixo de cada cor é a proporção da imagem ocupada por aquele grupo de cores. A mesma imagem sempre gera a mesma paleta.
Em fotos JPG, por causa da compressão, até uma área de cor lisa pode ter valores levemente diferentes em cada pixel. Para pegar a cor exata de um logotipo, use o PNG original ou escolha o centro da área com a lupa.
Perguntas frequentes
A cor na tela parece um pouco diferente do código.
Configurações de cor do monitor, modo escuro e o perfil de cor da imagem podem mudar levemente a cor exibida. O código extraído é exatamente o valor do pixel gravado no arquivo.
Quero pegar a cor de um site.
Faça uma captura da tela desejada (Windows: Win+Shift+S, Mac: Cmd+Shift+4), cole nesta página com Ctrl+V e toque no ponto desejado.
Onde ficam salvas as cores recentes?
As 12 últimas cores escolhidas ficam salvas só neste navegador, e você pode vê-las de novo na próxima visita. As imagens não são salvas.
E as áreas transparentes?
A paleta é calculada sem os pixels transparentes. Ao tocar em um ponto transparente, como não há informação de cor, pode aparecer preto (#000000).