Seletor de Cor de Imagem e Paleta
Seletor de Cor de Imagem e Paleta
Clique para selecionar cores da imagem, extraia automaticamente cores dominantes e paleta, copie HEX/RGB e exporte variáveis CSS. Suporta PNG, JPG/JPEG, WebP, AVIF, HEIC/HEIF.
Arraste e solte a imagem aqui ou clique para selecionar
Suporta PNG / JPG / JPEG / WebP / AVIF / HEIC / HEIF
🚀 Início rápido
- Importar imagem: Arrastar e soltar ou clicar para selecionar
- Trocar painel: Desktop mostra painel lateral; Mobile toque botão inferior
- Clique para selecionar: Clique em qualquer lugar da imagem para obter a cor do pixel
- Copiar cor: Após seleção copie formato HEX/RGB/CSS
- Definir quantidade de cores: Arraste controle ou clique preset (4/6/8/12/16/24/32)
- Extrair paleta: Clique no botão extrair para obter lista de cores dominantes
- Exportar CSS: Após extração exporte arquivo de variáveis CSS
- Exportar JSON: Após extração exporte arquivo de dados JSON
- Resetar: Limpar imagem atual e resultados
📌 Cenários comuns
- Seleção de cor de design/pôster: Extrair cores primárias e de destaque para esquema de cores
- Tema/sistema de design: Exportar variáveis CSS ou JSON para projeto
- Estilo de componentes: Extrair cores combinantes para botões, tags, gráficos
- Consistência de marca: Extrair paleta de cores padrão dos ativos da marca
🎛️ Opções de Seletor de Cor e Paleta
- Quantidade de cores: 2–32, comumente 8/12; fotos/gradientes sugerem 16–32
- Botões de preset: 4/6/8/12/16/24/32 troca com um clique
- Ordenação: Por porcentagem de alto para baixo, cores mais comuns primeiro
- Número ao lado da cor: Mostra porcentagem de pixels na imagem
🧭 Dicas de uso
- Comece com 8/12 para ver efeito geral, depois aumente para 16/24/32 conforme necessário
- Ao usar no projeto, renomeie --color-1 para nomes semânticos (ex., --color-primary)
- Mantenha página em primeiro plano ao extrair imagens grandes para evitar limitação do navegador
⚠️ Limitações e compatibilidade
- Limite de arquivo único 128MB, imagens muito grandes podem causar lentidão
- Extração de paleta faz downsampling automático para desempenho, resultados são cores representativas
- Decodificação HEIC/HEIF depende do suporte do navegador, converta para JPG/PNG se falhar
- Pixels transparentes são ignorados ou processados como RGBA real
🔒 Privacidade e segurança
- Todo processamento é feito no navegador; dados nunca saem do seu dispositivo
❓ Perguntas frequentes
Como usar o arquivo CSS exportado?
Coloque o :root { --color-1: ... } exportado no CSS global, depois referencie com var(--color-1).
Para que serve o JSON exportado?
Para reutilização de scripts/sistema de design, ex., gerar Design Tokens ou config de tema. Cada cor inclui hex/css/rgb e count.
Qual quantidade de cores é recomendada?
UI geral: 8 ou 12; ícones minimalistas: 4–6; fotos/gradientes: 16–32. Use presets para comparar rapidamente.
Por que as cores selecionadas e da paleta são diferentes?
Seleção por clique obtém pixel único; paleta quantifica imagem inteira para cores representativas enfatizando tendência geral.
Por que o botão exportar está cinza?
Precisa clicar primeiro em 'Extrair Paleta', exportar fica disponível após extração completar.
Como o nome do arquivo exportado é gerado?
Padrão usa nome do arquivo original (sem extensão) + .palette-quantidade + .css/.json, com caracteres ilegais limpos automaticamente.