Extrair cores da imagem — paleta e clique
Clique na imagem para fazer a média de uma região pequena em torno do ponto (cerca de 7×7 pixels de origem).
Obtenha cores dominantes e uma paleta completa de qualquer foto — ou use o seletor de cor com clique numa região. Passos: escolha a imagem, defina quantas cores (2–12), extraia, copie HEX/RGB/HSL, ou clique na pré-visualização para uma média local. Exemplo: seis tons de uma foto de marca e depois um clique no logo para um acento — o arquivo fica no dispositivo.
Como funciona
Escolha uma foto e extraia uma paleta: a página reduz uma cópia de trabalho (lado longo ~256 px), ignora pixels quase transparentes, agrupa cores e ordena pela frequência. Separadamente, clique na pré-visualização para fazer a média de um quadrado pequeno em torno desse ponto na resolução original e copiar HEX, RGB ou HSL — nada é enviado.
O que esperar
Extração de paleta e clique para pegar cor usam a mesma imagem, mas respondem a perguntas diferentes. Use a lista se uma cor parecer inesperada.
- A amostragem da paleta usa bitmap reduzido (borda máx. ~256 px) para fotos grandes continuarem rápidas. Detalhe fino pode fundir-se em tons próximos.
- Pixels com alfa abaixo de 128 são ignorados na paleta e nas médias por clique. Pontos totalmente transparentes mostram mensagem clara.
- Peça de 2 a 12 cores de paleta; imagens planas podem devolver menos. Cores ordenadas pela fatia de amostras.
- O clique faz a média de pixels opacos numa janela ~7×7 em torno do clique nas coordenadas de origem (não só a pré-visualização reduzida). É amostra de região, não conta-gotas de um pixel.
- Privacidade: decodificação, cálculo da paleta e amostragem por clique correm localmente nesta aba.
Exemplo
Carregue o exemplo de quatro blocos, mantenha Cores em 6 e extraia — deve ver teal, âmbar, verde, creme e vermelho. Depois clique no círculo vermelho: o cartão de cor escolhida mostra um HEX vermelho da média ~7×7 em torno desse ponto, pronto para copiar.
Bons encaixes
- Fotos de marca: monte uma paleta e depois clique num logo ou botão para um acento específico.
- Capturas de UI: veja a paleta da interface e depois clique num chip ou ícone para a cor exata da região.
- Ideias de gradiente: pegue dois acentos da paleta ou clicando, depois abra a calculadora de gradientes.
Frequently asked questions
A minha imagem sai do navegador?
Não. Cálculo da paleta e amostragem por clique correm localmente. Veja o separador Rede — a imagem não é enviada por POST.
Como são escolhidas as cores principais?
A página reduz a imagem, descarta pixels de baixa opacidade, divide o espaço de cor com median-cut, faz a média de cada grupo e ordena pelo número de amostras.
O que acontece quando clico na imagem?
A ferramenta mapeia o clique para pixels de origem e faz a média de cores opacas num quadrado pequeno (~7×7). Obtém HEX/RGB/HSL dessa região, separado da lista da paleta.
Por que um clique não é um único pixel?
Fotos e capturas de UI são ruidosas em 1×1. Uma média de região pequena é mais estável para acentos CSS e ainda reflete onde clicou.
GIFs animados são analisados por completo?
Só o primeiro quadro é desenhado, usado na paleta e disponível para pegar cor com clique.
Related tools
Dúvidas ou feedback
Algo pouco claro, quebrado ou faltando? Escreva abaixo — lemos cada mensagem sobre estas ferramentas.