Paleta de Cores e Conta-gotas

Cor é uma das decisões de design mais precisas que você pode tomar, mas extrair valores exatos de imagens reais sempre exigiu ou um software caro ou um chute pouco confiável com o conta-gotas. Esta ferramenta resolve os dois fluxos de trabalho em um lugar só. Alterne entre o modo Extrair Paleta, que analisa todos os pixels e devolve as seis cores dominantes mais distintas visualmente, com códigos HEX e RGB, e o modo Capturar Cores, em que você envia qualquer imagem e clica em qualquer pixel para obter o valor HEX, RGB e HSL exato. Tudo roda no seu dispositivo com a API Canvas. Sua imagem nunca sai do seu dispositivo.

Como usar o modo Extrair Paleta

1. Clique em Extrair Paleta no topo da ferramenta (é o modo padrão).
2. Envie uma imagem. Arraste qualquer foto, logotipo, captura de tela ou gráfico para a área indicada, ou clique para escolher. A ferramenta analisa a imagem imediatamente.
3. Revise a paleta. Seis cores dominantes aparecem como amostras, com os valores HEX e RGB abaixo de cada uma.
4. Copie uma cor. Clique em qualquer amostra para copiar o código HEX para a área de transferência. Salve a paleta completa como PNG pelo botão Salvar, ou compartilhe direto de um celular.

Como usar o modo Capturar Cores

1. Clique em Capturar Cores no topo da ferramenta.
2. Envie uma imagem. Arraste ou escolha qualquer imagem, como uma foto, captura de tela, mockup de interface, logotipo ou arte.
3. Clique em qualquer ponto da imagem. A imagem aparece em largura total, com o cursor em forma de mira. Clique em qualquer pixel para capturar a cor dele.
4. Copie o valor que precisar. A cor capturada aparece como amostra, ao lado dos valores HEX, RGB e HSL, cada um com o próprio botão Copiar.
5. Continue capturando. Clique em outras áreas para atualizar a cor. Clique em Redefinir para começar com uma imagem nova.

Dicas para um resultado melhor

• Use Extrair Paleta para trabalho de marca. Fotos de produto e logotipos com fundos limpos rendem as paletas mais aproveitáveis. As seis cores extraídas representam os tons mais distintos visualmente, prontos para usar como valores primários, secundários e de destaque em um design system.
• Use Capturar Cores para precisão de pixel. Quando você precisa do valor exato de uma cor específica em uma captura de interface, um design de referência ou uma fotografia, o Capturar Cores te dá o valor preciso, e não uma aproximação do algoritmo de extração de paleta.
• Amplie imagens complexas antes de clicar. Para elementos pequenos de interface ou detalhes finos, dê zoom na janela do navegador antes de clicar, para melhorar a precisão do ponteiro em áreas densas.
• Aplique as cores da paleta em marcas d'água. Copie os valores HEX da paleta extraída para a ferramenta de marca d'água em foto para manter as cores da marca d'água alinhadas à marca em todos os arquivos gerados.
• Confira a legibilidade em tamanho pequeno. Extraia as cores do seu logotipo e depois teste como elas ficam em contextos compactos, como um QR Code. Algumas cores que parecem vibrantes em tamanho grande perdem distinção em dimensões pequenas.

Por que usar o PixMidas

• 100% privado. Toda a extração de cores e captura de pixels roda no seu dispositivo via API Canvas. Sua imagem nunca é enviada a nenhum servidor.
• Dois modos em uma ferramenta. Extraia uma paleta completa de cores dominantes ou capture pixels individuais. Os dois fluxos ficam disponíveis na mesma página, sem trocar de ferramenta.
• Três formatos de cor no modo Capturar Cores. HEX, RGB e HSL aparecem ao mesmo tempo, com botões de copiar individuais. Sem precisar converter entre formatos manualmente.
• Sem conta e sem cadastro. Grátis e instantâneo. Abra a ferramenta e comece na hora. Veja todas as ferramentas na categoria Ferramentas de Cores.

Perguntas frequentes

Como funciona a extração de cores?

A ferramenta amostra milhares de pixels da imagem enviada e os agrupa por semelhança visual, usando uma abordagem de quantização de cores. Cores perceptualmente próximas são mescladas, e os valores distintos mais representativos são devolvidos. Isso te dá as cores dominantes, e não o valor do pixel individual mais frequente. O algoritmo evita devolver tons quase idênticos. Você sempre recebe seis cores visualmente distintas.

Qual é a diferença entre Extrair Paleta e Capturar Cores?

O Extrair Paleta analisa a imagem inteira e devolve automaticamente as seis cores mais dominantes. O Capturar Cores deixa você clicar em qualquer pixel individual para obter o valor exato dele. Extrair Paleta é melhor para montar uma paleta de design a partir de uma imagem de referência. Capturar Cores é melhor para combinar com um elemento específico, como o azul exato de um botão, o tom de pele preciso em um retrato ou a cor de fundo de uma captura de interface.

Quais formatos de cor estão disponíveis?

O Extrair Paleta mostra HEX e RGB para cada cor. O Capturar Cores mostra HEX, RGB e HSL, cada um com o próprio botão de copiar. HEX é o formato mais comum em CSS e ferramentas de design. RGB é usado em softwares de design e fluxos de impressão. HSL é útil para ajustes programáticos de cor, já que alterar só o componente de Luminosidade ou de Saturação cria variações consistentes da mesma cor.

Posso capturar cores de uma captura de tela de um site?

Sim. Faça uma captura de tela (no Mac: Cmd+Shift+4, no Windows: Win+Shift+S) e solte o arquivo na área de envio do Capturar Cores. Clique em qualquer pixel da captura para obter o valor exato. É útil para combinar cores de um site no ar sem ter acesso ao código-fonte ou às DevTools.

Quantas cores são extraídas no modo paleta?

Sempre seis. O algoritmo devolve seis cores dominantes visualmente distintas, independentemente da complexidade da imagem. Imagens simples, como logotipos, devolvem as cores exatas usadas. Fotografias complexas devolvem os grupos de cor mais representativos. Seis cores dão variedade suficiente para uma paleta de design completa, cobrindo tons primários, secundários, de destaque e neutros, sem tantas opções quase idênticas a ponto de a paleta ficar difícil de aplicar com consistência.

Minhas imagens são enviadas para algum servidor?

Nunca. Os dois modos usam a API Canvas do navegador para processar a imagem localmente. A imagem é lida na memória pela File API, amostrada ou analisada por JavaScript, e os resultados aparecem imediatamente, sem nenhuma requisição de rede. Sua imagem existe apenas na memória do seu dispositivo durante a sessão.