Ferramentas relacionadas
Por que usar um gerador de paletas?
Uma paleta partilhada mantém consistência visual, acelera a entrega a desenvolvimento e evita hex escolhidos ao acaso.
Benefícios
- Consistência: Mesmos destaques em ecrãs e suportes.
- Marca: Amostre fotos ou moodboards.
- Rapidez: Menos conta-gotas manual.
- Temas: Da imagem às variáveis claro/escuro.
- Inspiração: A foto sugere matizes inesperados.
Como funciona a extração
Os pixels são lidos, cores semelhantes agrupadas, e os tons mais representativos ordenados segundo o algoritmo.
Fluxo típico
- Carregar: Imagem nítida para tons fiáveis.
- Amostrar: Transparência forte é ignorada.
- Quantizar: RGB próximos fundem-se em poucas amostras.
- Ordenar: Por frequência ou centróides.
- Entregar: Copiar hex ou exportar código.
Factos
Poucas cores núcleo e contraste cedo reduzem retrabalho.
Referências
- Muitas UIs usam 3–10 cores principais.
- Frequência favorece grandes áreas.
- K-means ajuda em gradientes.
- CSS e JSON entram em tokens.
- Ficheiros grandes demoram mais a percorrer.
Boas práticas
Use o resultado como base e refine com marca e acessibilidade.
- Referências limpas, pouco comprimidas.
- Mais cores se a cena for carregada.
- Documente exportações e nomes de tokens.
- Teste texto real em fundos reais.
- Combine com teoria da cor.
Casos de uso
- Web: Páginas a partir de fotos de cliente.
- Marca: Cores de campanhas ou embalagem.
- Espaços: Inspiração para materiais.
- Moda: Moodboards sazonais.
- Arte: Estudar distribuição de cor.
Perguntas frequentes
Como extraio cores de uma imagem?
Carregue ou cole a imagem, escolha algoritmo e número de cores, e execute a extração. Cada amostra mostra hex e RGB; copie ou exporte.
Quais algoritmos existem?
Três modos: frequência (rápido), K-means (útil em gradientes) e median cut (equilibrado).
Posso exportar?
Sim: variáveis CSS, SCSS ou JSON; também copiar um ou todos os hex.
É gratuito e privado?
Sim. Sem conta. Processamento local, sem envio da imagem.
O que faz o verificador de contraste?
Estima razões entre cores da paleta com referências WCAG AA e AAA para pares texto/fundo.