Ir para o conteúdo

Seletor de Cor de Imagem e Paleta

Escolha cores de uma imagem no navegador, copie HEX/RGB/CSS, extraia uma paleta representativa de 2 a 32 cores e exporte variáveis CSS ou JSON com suporte a HEIC/HEIF.

Arraste e solte a imagem aqui ou clique para selecionar

Suporta PNG / JPEG / WebP / AVIF / HEIC / HEIF

Número de arquivos

0 / 1

Tamanho total

0 bytes / 25 MB

Limite por arquivo

25 MB

Seletor de Cor de Imagem e Paleta

Início rápido

1
Importe uma imagem
2
Clique na prévia e copie HEX/RGB/CSS
3
Escolha o tamanho da paleta (4/6/8/12/16/24/32)
4
Extraia cores representativas
5
Exporte variáveis CSS ou JSON

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

Contagem de cores: 2-32, geralmente 8/12; fotos/gradientes sugerem 16-32
Botões de preset: 4/6/8/12/16/24/32 troca com um clique
Classificação: por contagem de amostras quantizadas, de maior para menor, primeiro as cores mais comuns
Número próximo à cor: mostra a contagem de amostras quantizadas da imagem da paleta com resolução reduzida
Contrato de exportação: variáveis ​​ CSS usam nomes:root --color-1; JSON lista índice/hex/css/rgb/count para cada cor da paleta.

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

A extração de paleta reduz automaticamente a resolução para desempenho, os resultados são cores representativas.
Precisão: a amostragem de cliques usa uma tela exibida de até 2.048 px no lado mais longo; a extração de paleta usa uma amostra de 256 px.
HEIC/HEIF é apenas entrada; a decodificação local pode falhar, então converta para PNG/JPEG se necessário.
Manipulação alfa: CSS pode gerar rgba(...);HEX/RGB não inclui alfa; JSON mantém alfa através do valor css.
Limite de entrada: sem importação URL, importação de colagem, conta-gotas de tela ou fluxo de trabalho de extensão do navegador.
Limite de cor: sem conversão HSL/CMYK/Pantone/LAB/OKLCH, verificador de contraste ou matriz WCAG.
Limite de exportação: sem exportação de amostras Tailwind/SCSS/ASE/Figma/Procreate.

Privacidade e segurança

A seleção de cores da imagem e a extração da paleta acontecem no navegador. A imagem de origem fica na memória da página enquanto esta ferramenta está aberta. A configuração do tamanho da paleta pode ficar no armazenamento do navegador; se a sincronização WebDAV estiver ativada, essa configuração pode sincronizar de acordo com suas configurações. A cor escolhida, a paleta, a mensagem de erro e os dados de zoom / deslocamento da prévia são estado de revisão em tempo de execução e também podem sincronizar pelo WebDAV state schema enquanto existirem. O arquivo de imagem não é sincronizado por padrão; ele só entra na sincronização de anexos WebDAV quando você ativa explicitamente a sincronização de anexos. As exportações de paleta CSS/JSON são geradas no download e não são salvas como resultados separados. Em um dispositivo compartilhado, limpe quando necessário a imagem, as cores escolhidas, a paleta, as configurações salvas e os dados do site.

Perguntas frequentes

5

Continue com estas ferramentas relacionadas na próxima etapa.

Todo o processamento das ferramentas acontece localmente no seu navegador.