Extrator de paleta de cores

Extraia cores dominantes e valores HEX de qualquer imagem

Clique para selecionar ou solte uma imagem

Como funciona

Extrator de paleta de cores — Extraia cores dominantes e valores HEX de qualquer imagem. Todo o processamento acontece no seu navegador — sem upload, sem cadastro, sem e-mail. Grátis para sempre.

Última atualização: 2026-05-06

Editor's note

Usamos isso em capturas de tela de concorrentes e fotos de produto para extrair paletas para nosso próprio trabalho de marca, que é a razão real de existir. A maioria dos extratores de paleta entrega um grid sem estilo com códigos HEX embaixo em cinzinho minúsculo, e você acaba apertando os olhos, copiando e colando, e perdendo a linha. Construímos o nosso para que o HEX apareça no hover bem onde seu cursor já está — o olho já está na amostra, e forçá-lo a descer até uma legenda é um imposto pequeno mas real que pesa numa sessão longa.

A outra escolha que fizemos cedo foi padronizar para sete amostras, não dez. Ferramentas que mostram doze ou dezesseis cores por padrão ficam mais impressionantes em screenshots mas produzem paletas que ninguém consegue usar; a cauda longa é quase toda ruído puxado de bordas e sombras. Sete dá a história dominante e alguns acentos, que é a forma de uma paleta utilizável. Você pode subir o slider quando quiser inspiração, mas o padrão é o tamanho que entrega.

Sobre Extrator de paleta de cores

O Extrator de Paleta de Cores tira as cores dominantes de qualquer imagem e dá os valores HEX, RGB e HSL que você pode colar direto no seu design system, CSS ou Figma. É a forma mais rápida de traduzir uma foto de inspiração em uma paleta de marca, combinar acentos de UI com uma imagem de capa ou amostrar a história cromática de um concorrente.

Designers construindo uma nova marca puxam paletas de moodboards. Desenvolvedores front-end pegam amostras de uma imagem de capa para manter os acentos em harmonia. Profissionais de marketing extraem cores de produtos para semear criativos de campanha. Designers de interiores e stylists fazem o mesmo com fotos de tecidos ou ambientes.

A amostragem é processada no navegador via canvas — a imagem de inspiração nunca sai do seu dispositivo, o que é essencial quando a fonte é um moodboard privado ou um asset de campanha ainda não lançado.

Como usar Extrator de paleta de cores

Solte uma imagem (foto, ilustração, captura de tela — qualquer raster) na zona de upload.
Arraste o controle deslizante de quantidade de cores entre 3 e 16 para definir quantas amostras você quer.
Inspecione a linha de amostras — cada chip mostra seu valor HEX abaixo.
Clique em qualquer amostra para copiar o HEX. Troque o seletor de formato para saída em RGB ou HSL.
Rode de novo com uma quantidade diferente para ver paletas mais amplas ou mais granulares — às vezes 5 amostras contam uma história mais limpa do que 12.

Casos de uso comuns

Construir uma paleta de marca a partir de uma única foto de mood para o deck de um cliente novo.
Escolher uma cor de botão de CTA que complemente a imagem de capa de um site.
Extrair cores de guarda-roupa de uma foto de moda para uma página de categoria de e-commerce.
Amostrar cores de capturas de tela de concorrentes durante uma auditoria de marca.
Gerar uma escala de cores Tailwind a partir de uma única imagem de origem (extraia 5 cores, construa tons claros/escuros a partir de cada uma).

Dicas e erros comuns

Fotografias da natureza costumam produzir paletas mais ricas do que capturas de UI — UIs tendem a ser dominadas por fundos brancos/cinzas.
Recorte a imagem para a área que você realmente se importa antes de extrair. Uma paisagem completa traz céu e chão; um detalhe recortado traz as cores do sujeito.
Cinco a sete cores é o ponto ideal para uma paleta utilizável. Dezesseis é ótimo para inspiração, mas raramente entra em um design system como está.
Se a paleta extraída parecer barrenta, aumente o contraste da imagem de origem primeiro — fotos lavadas geram paletas lavadas.

Perguntas frequentes

Como a paleta é calculada?

Amostramos pixels em uma grade RGB 6×6×6 grosseira, fazemos média de cada bin e mantemos os baldes mais frequentes. Rápido e produz cores visualmente agrupadas.

Quantas cores posso obter?

Entre 3 e 16. Contagens maiores destacam acentos mais sutis ao custo de baldes menos distintos.

Minha imagem é enviada?

Não. A amostragem roda no navegador via canvas — nada é enviado.

Posso exportar a paleta para Figma ou Adobe?

Ainda não diretamente. Por enquanto, copie cada HEX e cole na sua ferramenta — os color styles do Figma aceitam HEX direto, e o Adobe aceita importações ASE construídas a partir de uma lista HEX. Uma exportação de um clique está no roadmap.

Por que minha foto de um arco-íris só retorna seis cores?

Tons visualmente parecidos colapsam no mesmo bin RGB durante a amostragem. Aumente a quantidade de cores para 12 ou 16 para revelar mais nuances, ou recorte para a região com mais variedade.

Os valores HEX são valores exatos de pixel?

São a média de cada bin, não uma amostra de pixel único. É por isso que parecem 'a cor que você escolheria a olho' em vez de um pixel aleatório que pode ser de uma borda ou sombra.