Como usar: Extrator de Paleta de Cores de Imagem
- Escolha uma imagem, arraste ou cole — ou teste com a imagem de exemplo.
- Defina quantas cores quer; marque Ignorar quase branco e quase preto para logos e fotos de produtos em fundo liso.
- Clique em qualquer amostra para copiá-la, ou clique na imagem para pegar a cor exata de um pixel.
- Exporte a paleta como variáveis CSS, configuração de cores do Tailwind, SCSS ou JSON.
Como as cores são encontradas
A imagem é reduzida e seus pixels são agrupados por cor com clusterização k-means: o algoritmo posiciona tantos “centros” quantas cores você pediu, associa cada pixel ao centro mais próximo, move cada centro para a média dos seus pixels e repete até que se estabilizem. Cada centro vira uma amostra, e sua porcentagem mostra quanto da imagem ele cobre. Pixels transparentes são ignorados, então logos com fundo transparente funcionam muito bem.
Como usar a paleta
- Escolha uma cor dominante para fundos e uma cor forte e contrastante para botões e links.
- Verifique pares de texto e fundo com o Verificador de Contraste.
- Transforme uma cor em uma escala completa de 50 a 950 com o Gerador de Cores Tailwind, ou descubra o nome dela com o Buscador de Nomes de Cores.
Sua imagem é processada no seu dispositivo com canvas e nunca é enviada para a internet.
Também pesquisado como: paleta de cores de imagem, extrair cores de imagem, paleta de cores a partir de imagem, conta-gotas de imagem, pegar cores de foto, extrator de cores, seletor de cores de logo, gerador de paleta a partir de foto.
Ferramentas que combinam com: Extrator de Paleta de Cores de Imagem
- Conversor de Cores — Cole qualquer cor CSS — HEX, rgb(), hsl(), hwb(), oklch() ou um nome como tomato — e veja todos os outros formatos na hora, além de uma paleta pronta de 50 a 950.
- Mixer de Cores — Escolha duas cores e a quantidade de passos para obter cores de transição misturadas uniformemente — perfeitas para gradientes, bordas, gráficos e estados de hover.
- Gerador de Gradiente CSS — Monte um gradiente visualmente: arraste as paradas de cor, troque o ângulo ou o tipo, comece de uma predefinição e copie um CSS pronto para produção, com uma cor sólida de fallback.
- Conversor HEX para RGBA — Cole um código HEX, arraste o slider de opacidade e copie o CSS exato que você precisa: rgba() tradicional, rgb( / alpha) moderno ou HEX de 8 dígitos.
Perguntas frequentes
Como extrair a paleta de cores de uma imagem?
Arraste a imagem para cá: as cores principais aparecem como amostras, com a porcentagem da imagem que cada uma ocupa. Altere o número de cores com o controle deslizante e exporte a paleta em CSS, Tailwind ou JSON.
Como descobrir o código HEX de uma cor específica em uma foto?
Clique nesse ponto da imagem. A cor exata do pixel aparece abaixo em HEX, RGB e HSL, pronta para copiar.
Por que o branco ou o preto aparece como cor principal?
Fundos costumam ocupar a maior parte de uma imagem. Marque “Ignorar quase branco e quase preto” para ver as cores do assunto principal.
Minha imagem é enviada para algum servidor?
Não. Ela é lida e analisada no seu navegador; nada é enviado para um servidor.
Posso instalar o Extrator de Paleta de Cores de Imagem como um aplicativo da web e usá-lo offline?
Sim. O Extrator de Paleta de Cores de Imagem é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.