Gerador de Paleta de Cores por Imagem
Extraia paletas de cores de qualquer imagem — obtenha códigos HEX, RGB, HSL e exporte como CSS variables, Tailwind, JSON ou PNG. 100% no browser, sem upload.
Atualizado em maio de 2026
Como extrair cores de uma imagem
Da foto à paleta pronta para produção
1. Suba sua imagem
Arraste JPG, PNG, WebP, GIF ou SVG, ou cole a URL de uma imagem pública.
2. Escolha quantas cores
Entre 3 e 12 — 6 é um bom padrão para a maioria dos casos.
3. Copie ou exporte
Clique num swatch para o HEX, ou exporte CSS, Tailwind, JSON ou DESIGN.md.
O que esta ferramenta faz
K-means clustering, não uma simples média
Extração por clustering perceptual
K-means agrupa pixels visualmente similares — não uma média embaralhada de cores.
Inicialização K-means++
Pontos de partida mais inteligentes garantem resultados estáveis entre execuções.
5 formatos de exportação
CSS variables, Tailwind config, JSON, DESIGN.md e card PNG de swatches.
100% no navegador
Processa via Canvas API — imagens privadas e assets de marca nunca saem do dispositivo.
Atalho de teclado para exportar
Pressione Shift+Enter em qualquer parte da página para copiar a aba de exportação ativa sem tirar as mãos do teclado.
Nomenclatura semântica de papéis no DESIGN.md
Cada cor exportada em DESIGN.md já recebe um nome de papel (primary, secondary, accent, neutral...) pronto para virar design token, sem retrabalho manual.
Exemplos de uso
Quando você vai usar isso
Os cenários mais comuns entre quem usa a ferramenta
Identidade de marca a partir do logo
Extraia 4–6 cores e documente com HEX preciso para brand guidelines e Figma.
Web design e desenvolvimento
Exporte direto como configuração Tailwind extend.colors sem selecionar cores manualmente.
Fotografia e mood boards
Extraia a paleta do humor de cor exato de uma foto de referência.
Design de interiores e materiais
Obtenha valores de cor exatos de uma foto de ambiente para matching de tintas.
Consistência em redes sociais
Extraia a paleta dos posts de melhor desempenho para manter o feed do Instagram ou o conteúdo de marca visualmente coeso.
Erros comuns
Confundir cor dominante com cor média
Dominante é a mais visualmente proeminente por clustering; média é matemática e produz tom embaralhado não representativo.
Usar imagem muito pequena
Para melhores resultados, use imagens com pelo menos 200×200 pixels.
Pedir cores demais para um logo simples
4–6 cores já cobre a maioria das identidades — pedir 12 pode incluir ruído irrelevante.
URL de imagem bloqueada por CORS
Nem todo domínio permite leitura de pixels via navegador. Se a extração por URL falhar, baixe a imagem e suba o arquivo diretamente.
Esperar que fundo transparente conte como cor
Pixels com transparência são ignorados no clustering — uma imagem com muita área transparente pode retornar menos variação de cor do que se espera.
Por que usar esta ferramenta
K-means supera abordagens mais simples como median cut porque encontra clusters perceptualmente significativos, não divisões arbitrárias do espaço de cores.
É a única ferramenta da categoria que exporta diretamente para o formato DESIGN.md, o spec open source usado por assistentes de código com IA como Claude Code e Cursor.
A extração roda em milissegundos direto no navegador via Canvas API — sem upload, sem cadastro e sem limite de uso. No export DESIGN.md, cada cor já sai com um nome de papel semântico (primary, secondary, accent...) pronto para virar design token, poupando o trabalho manual de nomear cada variável.
Cor dominante vs. cor média
Por que K-means importa
Perguntas frequentes
Suba sua imagem — a extração roda 100% no navegador usando K-means clustering e retorna as cores dominantes como HEX, RGB e HSL em milissegundos.
Referências
Ferramentas Relacionadas
- Gerador de Paleta de Cores Design Gere paletas de cores harmoniosas a partir de qualquer cor base. Escolha harmonia Análoga, Complementar, Triádica ou Tetrádica — exporte como CSS variables...
- Verificador de Contraste de Cores Design Verificador de contraste de cores grátis — verifique conformidade WCAG 2.2 AA e AAA instantaneamente. Preview ao vivo, simulação de daltonismo e sugestões...
- Conversor de Cores Design Converta cores entre HEX, RGB, HSL e CMYK instantaneamente. Ferramenta gratuita com seletor de cores, verificador de contraste WCAG e gerador de paletas.
- Gerador CSS Box Shadow — Neumorfismo, Glassmorfismo e Tailwind Design Gerador CSS box shadow grátis com preview em tempo real. Crie sombras, efeitos neumorfismo e glassmorfismo. Exporte para CSS, Tailwind ou variáveis CSS.
- Gerador CSS Flexbox Design Gerador CSS Flexbox grátis: preview ao vivo, saída Tailwind + CSS simultânea, 10 presets prontos, avisos contextuais e exportação React/JSX. Sem cadastro.
