Voce ve uma cor em uma captura de tela: um verde-azulado perfeitamente saturado em um anuncio da Stripe, um verde salva relaxante em uma landing page de SaaS, e quer usar no seu proprio projeto. Voce sabe que a cor esta em algum lugar da imagem, mas como tira o valor #xxxxxx?

A resposta e a extracao de paleta de cores: um processo que varre todos os pixels de uma imagem e retorna as cores dominantes. Designers fazem isso manualmente no Photoshop ha anos, mas hoje existem alternativas mais rapidas, gratuitas e no navegador que levam 30 segundos sem instalar nada.

Este guia compara 3 metodos gratuitos, percorre o fluxo de 30 segundos com o recomendado, e mostra como ler o resultado para que voce possa copiar cores direto para seu CSS, arquivo do Figma ou design tokens.

Os 3 metodos gratuitos de uma vez

MetodoVelocidadePrecisaoPrivacidadeCusto
Conta-gotas do Photoshop / GIMPLento (manual, uma cor por vez)Pixel-perfect100% localGratis (GIMP) / $25/mes (Photoshop)
Sites de extracao onlineRapidoBom⚠️ Imagem enviada ao servidorGratis com anuncios, HD pago
Ferramenta no navegador (sem envio)30 segundosBom para design100% local, imagem nunca saiGratis

A terceira opcao, um extrator totalmente no navegador, e o ponto ideal para 2026. Voce ganha velocidade quase de Photoshop para paletas de qualidade de design, sua imagem nunca sai do dispositivo, e nao tem cadastro, nem popup, nem limite de 5 megapixels.

Por que “cores dominantes” vence “cor media”

Se voce pega uma foto de 1000×1000 e calcula a media de todos os pixels, quase sempre voce tera um marrom acinzentado turvo que nao aparece em nenhum lugar da imagem real. Um exemplo real:

  • Uma foto de um limao amarelo sobre uma mesa branca: RGB medio = (178, 165, 105), um caqui desaturado que nao existe na foto.
  • A cor dominante dessa mesma foto: #F4D03F, o amarelo limao real que seus olhos veem.

Algoritmos que reportam “a cor media” sao tecnicamente corretos mas visualmente sem sentido. A extracao real de paleta funciona agrupando pixels similares em baldes e reportando quais baldes tem mais pixels. Uma foto com um limao, uma folha e um fundo branco produz 3 cores dominantes, nao 1 media turva.

Metodo 1: Conta-gotas do Photoshop / GIMP (o metodo classico)

Isso e o que os designers faziam de 2000 ate ~2018. O fluxo:

  1. Abra a imagem no Photoshop ou GIMP.
  2. Troque para a ferramenta Conta-gotas (I no Photoshop).
  3. Clique em um unico pixel.
  4. Leia o valor HEX no seletor de cor.
  5. Repita 5-6 vezes para as cores que voce realmente quer.

A pegadinha: te da a cor no pixel exato em que voce clicou, nao as cores dominantes da imagem. Se voce quer uma paleta representativa, precisa saber quais pixels clicar, normalmente a maior area plana de cada cor. Designers calculam isso no olho, mas precisa de pratica e o resultado varia de pessoa para pessoa.

Quando ainda usar este metodo: quando voce precisa de amostragem de cor pixel-perfect de uma area especifica, como pegar a cor exata de um botao em um mockup de UI, ou igualar um logo que tem bordas com anti-aliasing.

Metodo 2: Sites de extracao de paleta online

Sites como Coolors.co, ColorThief e Adobe Color tem funcoes de “imagem para paleta”. A maioria funciona do mesmo jeito:

  1. Envie sua imagem.
  2. O site roda a extracao no servidor.
  3. Voce recebe uma paleta com valores HEX e um botao de “baixar como ASE / GPL / CSS”.

Pros: ferramentas estabelecidas, geralmente incluem formatos de exportacao que designers querem (Adobe Swatch Exchange, paletas do Sketch, variaveis CSS).

Contras:

  • Privacidade: sua imagem e enviada para um servidor de terceiros. Para fotos pessoais, e desconfortavel. Para capturas de produtos nao lancados ou trabalho de clientes, pode violar NDA.
  • Limites: a maioria dos planos gratuitos limita em 1-5 megapixels ou exige cadastro para HD.
  • Anuncios e popups: planos gratis empurram assinaturas premium agressivamente.
  • Sem controle sobre o algoritmo: voce recebe 5 ou 8 cores, nao “quero exatamente 6 cores com quantizacao de 32 baldes”.

Para projetos pessoais, esses sites funcionam. Para qualquer coisa sensivel, ou qualquer coisa que voce vai fazer mais de duas vezes, o atrito se acumula.

Metodo 3: Ferramenta no navegador (o padrao 2026)

O fluxo mais rapido, mais privado e mais repetivel. Tudo acontece no cliente em JavaScript sobre um <canvas>, entao:

  • Sem envio de imagem
  • Sem processamento em servidor
  • Sem limite de tamanho de arquivo alem do que seu navegador consegue renderizar
  • Funciona offline depois de carregada

Aqui vai o fluxo de 30 segundos usando o Seletor de cor e paleta gratis da Piick:

  1. Abra a pagina piick.cc/tools/color-palette-extractor.
  2. Clique na aba Paleta da imagem.
  3. Arraste qualquer imagem (JPG, PNG, WebP, GIF, ate 10 MB) para a zona de upload.
  4. Escolha quantas amostras voce quer (5, 6 ou 8).
  5. Clique em Extrair paleta.
  6. Cada amostra mostra seu codigo HEX e a porcentagem da imagem que ela cobre.
  7. Clique em qualquer amostra para expandir: voce tera HEX, RGB, HSL e botoes de copiar para cada formato.

Tempo total: 30 segundos para uma captura, 60 segundos para uma foto principal.

Como o algoritmo funciona (a versao curta)

Quando voce clica em Extrair, a ferramenta faz quatro coisas:

  1. Reduz a imagem para uma miniatura de 200×200 (por isso continua rapida em arquivos grandes).
  2. Agrupa em baldes cada pixel arredondando cada canal de cor para o multiplo de 32 mais proximo, entao (255, 200, 150) e (248, 192, 144) caem no mesmo balde.
  3. Conta quantos pixels caem em cada um dos 512 baldes possiveis.
  4. Retorna os K baldes principais por contagem de pixels, ordenados do mais dominante para o menos dominante.

Isso se chama quantizacao por baldes (ou quantizacao de cor). Nao e tao suave quanto k-means, mas:

  • E ~10x mais rapido (sem iteracao, passada unica pelos pixels)
  • E deterministico: a mesma imagem sempre da a mesma paleta
  • E facil de entender: os baldes sao visiveis no histograma

Para paletas de qualidade de design (5-8 cores de uma marca, uma foto, uma captura de UI), quantizacao por baldes e mais que suficiente. K-means e para aplicacoes cientificas como imagens medicas.

Lendo o resultado: o que as porcentagens significam

Quando a ferramenta diz “Cor 1: #3B82F6, proporcao: 42%”, isso nao significa que 42% da imagem e exatamente #3B82F6. Significa que 42% dos pixels amostrados caíram no balde que arredonda para #3B82F6. As cores reais naquela area da sua imagem podem variar de #3580F0 ate #4290FA, todas arredondadas para a mesma amostra.

Isso serve para trabalho de design. Se voce precisa do valor medio exato de uma regiao, voce usaria uma ferramenta diferente.

Alem da extracao: o seletor manual

Mesma ferramenta, aba Seletor de cor. Util quando:

  • Voce esta partindo de uma cor (cor de marca do seu guia de estilo) e quer ver em HEX, RGB e HSL ao mesmo tempo
  • Quer gerar armonias: variacoes complementares, analogas e triadicas de uma cor base, sem abrir o Figma ou um livro de teoria das cores
  • Esta convertendo entre formatos: alguem te enviou rgb(59, 130, 246) e voce precisa de #3B82F6 para CSS

Cinco amostras de harmonias atualizam em tempo real conforme voce muda a cor base. Clique em qualquer harmonia para carrega-la no seletor.

Tres cenarios do mundo real

Cenario 1: Copiar a cor de marca de um concorrente

Uma landing page de SaaS tem uma cor de botao que voce quer pegar emprestado para seu proprio redesign. Tire uma captura da pagina, abra a ferramenta, solte a captura. Extraia 6 amostras. A cor do botao sera uma delas, geralmente a mais saturada. Clique para expandir, copie o HEX, cole no seu CSS.

Dica: primeiro recorte a captura apenas para o botao, assim outros elementos de UI nao poluem a paleta.

Cenario 2: Construir uma paleta a partir de uma foto para um post de blog

Voce tirou uma foto de floresta para o cabecalho de um blog e quer usar suas cores como paleta de destaque do artigo. Extraia 5 amostras da foto. Voce tera 2-3 verdes, um marrom, talvez um azul-ceu. Escolha os 3 com melhor contraste contra seu fundo e use como cores de destaque.

Dica: as porcentagens de proporcao ajudam a decidir quais cores sao “fundo” (alta proporcao) vs “destaque” (baixa proporcao). Nao escolha a cor principal como destaque: ela vai brigar com seu fundo real.

Cenario 3: Verificar o entregavel de um designer

Um designer freelancer te enviou uma ilustracao principal com paleta de marca. Solte a ilustracao. Extraia 6 amostras. Compare os valores HEX resultantes com o guia de estilo da marca. Se #FF6B35 deveria ser o laranja primario e a extracao te da #FF7039, voce tem uma conversa a fazer: e uma diferenca de 2 bits por canal, mas suficiente para que designers notem.

Problemas comuns (e o que fazer)

  • A paleta tem muitas cores similares. Sua imagem e dominada por um tom (por do sol, manha nebulosa). Solucao: extraia apenas 5 amostras, ou escolha das de menor proporcao para destaques de contraste.
  • A paleta tem marrons turvos feios. Ha muito ruido de compressao na imagem. Solucao: use uma fonte de maior qualidade (PNG em vez de JPG, ou um JPG de maior resolucao). Quantizacao por baldes nao consegue distinguir sinal de artefatos de compressao.
  • A cor dominante e branca ou preta. A imagem tem muito fundo (captura de tela, logo sobre branco). Solucao: recorte mais justo antes de extrair, ou use o seletor manual para definir o fundo e depois amostrar o primeiro plano.
  • Voce quer mais de 8 cores. Quantizacao por baldes satura perto de 8-10 amostras uteis antes que baldes vizinhos comecem a brigar. Para paletas com 20+ cores, voce precisa de uma ferramenta de design de verdade (Figma, Adobe Color).

Quando pular a extracao por completo

As vezes a resposta nao e “extrair de uma imagem”, mas “escolher de uma paleta curada”:

  • Cores de marca que ja existem em um guia de estilo: copie o HEX direto
  • Material Design / Tailwind / Bootstrap: paletas bem testadas que ja cobrem a maioria dos casos
  • Paletas guiadas por acessibilidade: quando o contraste WCAG e a restricao, voce precisa de ferramentas baseadas em ratios, nao extracao

Quantizacao por baldes e para “vejo uma cor, quero o codigo”. Para tudo mais, use outra ferramenta.

Teste agora

Abra o Seletor de cor e paleta, solte qualquer imagem, e voce tera uma paleta de 6 cores com codigos HEX em 30 segundos. Sem envio, sem cadastro, sem limites alem da memoria do seu navegador.

Quando voce tiver sua paleta, cole em um bloco de variaveis CSS. Uma extracao de 6 cores de uma captura estilo Stripe pode te dar algo como:

  • --color-1: #3b82f6; — azul principal da marca
  • --color-2: #1e40af; — estado hover/ativo
  • --color-3: #93c5fd; — destaque claro
  • --color-4: #fbbf24; — aviso / destaque
  • --color-5: #f59e0b; — destaque secundario
  • --color-6: #111827; — texto / superficie escura

Depois na sua folha de estilos, referencie como var(--color-1) em vez do HEX puro. Publique.