Gerador de paleta de cores
Extraia as cores de uma imagem ou componha harmonias.
- Instantânea
- Grátis
- Privada (processada localmente)
- Sem registo
Clique numa cor para copiar o código
Uma paleta profissional em segundos
Toda a identidade visual começa por uma paleta. Dois caminhos levam lá: partir de uma imagem que já carrega o ambiente desejado (foto, moodboard, captura) e extrair as suas cores dominantes, ou partir de uma cor de marca e construir as suas harmonias segundo a teoria das cores.
-
Imagem → paleta
Largue a imagem: o algoritmo k-means agrupa os píxeis e revela as 6 cores dominantes com o seu peso.
-
Cor → harmonias
Escolha a cor de base: complementar, análogas, tríade e tons geram-se instantaneamente.
-
Exporte
Clique numa cor para copiar o código, ou copie todo o bloco de variáveis CSS / Tailwind.
As harmonias em resumo
| Harmonia | Construção | Efeito |
|---|---|---|
| Complementar | 2 cores a 180° | Contraste máximo, energia |
| Análogas | 3 cores a ±30° | Suavidade, coerência natural |
| Triádica | 3 cores a 120° | Equilíbrio vivo e colorido |
| Tons | Mesma tonalidade, 5 claridades | Profundidade monocromática, hierarquia |
Regra 60-30-10: cerca de 60 % de cor dominante, 30 % de secundária, 10 % de acento. Verifique também o contraste texto/fundo com o nosso verificador WCAG.
Perguntas frequentes
Como são extraídas as cores da imagem?
Com um algoritmo de agrupamento k-means executado no seu navegador: os píxeis são agrupados em 6 famílias de cores próximas, e o centro de cada família torna-se uma cor da paleta, ordenada por importância (percentagem da imagem).
O que é uma cor complementar?
A cor diametralmente oposta no círculo cromático (a 180°). O par cria o contraste mais forte: ideal para destacar um botão de chamada à ação sobre um fundo.
Análogas, tríade: quando usar?
As análogas (±30°) criam ambientes suaves e coerentes — perfeitas para fundos. A tríade (3 cores a 120°) oferece um equilíbrio vivo: uma dominante, dois acentos.
Como uso a exportação CSS?
O bloco gerado contém variáveis CSS (--color-1, --color-2…) para colar no seu :root, mais o equivalente para a config do Tailwind. Renomeie as variáveis pelo papel (--primary, --accent…) para um código mais legível.
A minha imagem é enviada para algum lado?
Não: a análise k-means corre inteiramente no navegador sobre uma miniatura da imagem. Nada é transmitido, mesmo com fotos grandes.