Como extrair uma paleta de cores de uma foto, passo a passo
Transforme qualquer foto em uma paleta de cores pronta, com HEX e RGB, em poucos cliques. Tutorial com prints usando o Mappum.
Aquela foto que tem exatamente o clima do seu projeto já contém a paleta de cores que você procura. Neste tutorial você vai transformar uma imagem em cartões de cor, com código HEX e RGB prontos para copiar, usando o Mappum.
Por que começar a paleta por uma foto
Escolher cores "no olho" costuma gerar combinações que não conversam entre si. Uma fotografia, ilustração ou pintura de referência já traz cores que funcionam juntas, porque aparecem na mesma cena, sob a mesma luz. Extrair a paleta dessa imagem é um atalho para um visual coerente em identidade visual, ilustração, interface ou decoração.
O que você vai precisar
- Uma imagem de referência no seu computador.
- Acesso ao Mappum em mappum.com/app. Dá para testar sem conta: na tela de entrada, escolha Entrar como convidado. O quadro de convidado é temporário e pode se perder ao atualizar a página; para guardar seus mapas, entre com o Google ou com e-mail.
Passo 1: abra um quadro e adicione a foto
Crie um quadro novo. Na barra de ferramentas à esquerda, clique em Imagem e escolha a foto no seu computador. Você também pode arrastar a imagem para o quadro ou colar com Ctrl+V.
O Mappum converte a imagem para WebP automaticamente, deixando o arquivo bem menor e o quadro leve, mesmo com muitas referências.
Passo 2: selecione a imagem
Clique uma vez sobre a foto. Ela ganha um contorno azul e, no topo da tela, aparece uma barra de opções com Descrição, Cortar, Extrair paleta e Moldura.
Passo 3: clique em "Extrair paleta"
Com a imagem selecionada, clique em Extrair paleta. Em um instante o Mappum cria cartões de cor logo abaixo da foto e avisa quantas cores encontrou. Nesta foto de pôr do sol foram 6.
Cada cartão mostra o código HEX, o valor RGB e um nome sugerido para a cor (em inglês). Neste exemplo:
- #B87C8A — Dusty Red
- #261C44 — Midnight Purple
- #123C59 — Midnight Sky
- #116876 — Deep Teal
- #8C5697 — Dusty Purple
- #C37E53 — Warm Orange
Enquanto os cartões estão selecionados, a barra do topo deixa você escolher o que aparece neles: HEX, RGB, Descrição, Só a cor ou Tudo.
Passo 4: copie o código da cor
Passe o mouse sobre um cartão e clique no botão de copiar (⧉) no canto da amostra de cor. Aparece o aviso "Copiado: #B87C8A" e o código fica na área de transferência, pronto para colar no Figma, no Photoshop, no CSS ou onde precisar.
Quer ajustar uma cor? Dê um duplo clique sobre o cartão para escolher outra.
Como usar bem a paleta extraída
Ter os códigos é só o começo. Algumas regras práticas:
- Escolha de 3 a 5 cores. Seis já é muito para a maioria dos projetos; descarte as que não ajudam.
- Defina papéis. Uma cor dominante, uma de apoio e uma de destaque. As outras ficam para detalhes.
- Teste o contraste. Texto claro sobre um fundo escuro, como o roxo #261C44, costuma ler melhor do que dois tons médios lado a lado.
- Guarde ao lado da referência. Deixe a foto e os cartões no mesmo quadro: quando voltar ao projeto, você sabe de onde cada cor veio.
Experimente agora: abra o Mappum em mappum.com/app, entre como convidado, arraste uma foto sua para o quadro e clique em Extrair paleta. Leva menos de um minuto.
Perguntas rápidas
Preciso criar conta para extrair a paleta?
Não. Você pode usar como convidado. Só lembre que o quadro de convidado é temporário; entre com o Google ou com e-mail para guardar o seu trabalho.
Posso usar qualquer imagem?
Sim, qualquer imagem que você adicionar ao quadro: fotos, ilustrações, capturas de tela ou obras de referência. O resultado depende das cores predominantes de cada imagem.
Quantas cores o Mappum extrai?
Depende da imagem: ele escolhe as cores mais representativas e descarta tons quase idênticos. Nesta foto foram 6.