Extrair a paleta de cores de uma imagem

O que é uma paleta de cores?

Uma paleta de cores é o pequeno conjunto de tons que define a aparência de uma imagem ou de uma marca. Extrair a paleta de uma foto permite reutilizar exatamente essas cores num design, site, apresentação ou na decoração de um ambiente, com um resultado coerente e harmonioso.

Designers, desenvolvedores web, criadores de conteúdo e qualquer pessoa que queira combinar cores com segurança usam ferramentas como esta todos os dias: para criar a identidade de um projeto a partir de uma foto inspiradora, para combinar um site com as cores de um logotipo ou simplesmente para descobrir o código de uma cor específica.

Como extrair as cores de uma imagem

1. Adicione a imagem arrastando-a para a área acima, escolhendo-a ou colando com Ctrl+V.
2. Veja a paleta: aparecem as cores dominantes, ordenadas pela parte da imagem que ocupam.
3. Ajuste o número de cores com o controle deslizante, entre 3 e 12.
4. Clique numa cor para copiar seu código HEX. Também dá para copiar a paleta inteira, copiá-la como variáveis CSS ou baixá-la como imagem PNG.
5. Use o conta-gotas: clique em qualquer ponto da imagem para obter a cor exata daquele pixel.

Como as cores são calculadas

O Pasafoto analisa os pixels da imagem e aplica o algoritmo de corte pela mediana (median cut), a mesma ideia que muitos programas de edição usam para reduzir cores. Ele agrupa os tons parecidos e tira a média de cada grupo, então a paleta reflete as cores realmente presentes na foto e quanto cada uma ocupa. As áreas transparentes são ignoradas, por isso funciona bem com logotipos em PNG.

HEX, RGB e CSS

• HEX (#1E40AF): o formato mais usado em design web e em ferramentas como Figma ou Canva.
• RGB (rgb(30, 64, 175)): a quantidade de vermelho, verde e azul, de 0 a 255.
• Variáveis CSS: o botão “Copiar CSS” gera um bloco :root pronto para colar na sua folha de estilos.

Privado e grátis

A imagem é analisada no seu navegador e nunca é enviada a um servidor. Você pode usá-la com projetos confidenciais, fotos pessoais ou materiais de clientes com total tranquilidade.

Ideias para usar sua paleta

Uma regra clássica de design é a 60-30-10: uma cor dominante para 60% da superfície (fundos), uma secundária para 30% (blocos, cartões) e uma de destaque para 10% (botões, links). Extraia 5 ou 6 cores de uma foto que inspire você e distribua os papéis assim. Confira também o contraste entre texto e fundo para que tudo seja legível: as cores muito claras funcionam como fundo e as escuras como texto. Se você parte de um logotipo, extraia só 3 ou 4 cores para obter as cores exatas da marca.