Obter cores dominantes e códigos HEX

Escolha ou cole uma imagem, selecione de 4 a 12 cores e extraia a paleta. Clique em uma amostra para copiar o HEX; os tons representam aproximações das cores dominantes.

Funciona localmente no seu navegador

Ver categoria: Frontend e design (34)

Os pixels são amostrados e reduzidos somente neste navegador. A imagem nunca é enviada ao VoriTools ou a um serviço de imagens.

Origem da imagem

Solte uma imagem aqui, cole uma imagem ou escolha um arquivo local

Opções de paleta

Cores a extrair

Pixels transparentes são ignorados. Imagens grandes são reduzidas antes da análise para manter o navegador responsivo; as amostras representam regiões dominantes, não pixels exatos.

Usar a paleta

Clique em uma amostra para copiar o valor hexadecimal. Combine primeiro plano e fundo com o Auditor de acessibilidade para conferir o contraste WCAG.

Abrir verificador de contraste

Paleta extraída

Escolha uma imagem para extrair uma paleta local.

Encontre cores úteis sem enviar um ativo de design

O extrator analisa uma tela reduzida no navegador e mantém o arquivo original no seu dispositivo. Para interfaces acessíveis, valide cada par final de texto e fundo separadamente.

Como extrair uma paleta de cores de uma imagem

O Image Color Extractor monta uma paleta prática a partir de uma imagem local: solte, cole ou escolha um arquivo, selecione de 4 a 12 cores e copie os valores HEX direto para o CSS.

A imagem é amostrada em um canvas reduzido dentro desta aba, então nada é enviado. O resultado aproxima as cores dominantes; não é um conta-gotas que lê pixels exatos.

Adicione uma imagem: solte na área de upload, cole com a página em foco ou escolha um arquivo local (PNG, JPEG, WebP, GIF, AVIF ou BMP, até 40 MB).
Escolha quantas cores manter: 4, 5, 6, 8, 10 ou 12. O padrão é 6.
Clique em Extrair cores. Pixels com alfa abaixo de 90 são ignorados, então a paleta vem apenas das áreas opacas.
Clique em uma amostra para copiar o código HEX; cada amostra também mostra o valor rgb() e sua fatia dos pixels amostrados. Carregar exemplo sintético usa uma imagem de teste 960 × 560 embutida.
Limpar redefine a imagem e os resultados. Para conferir um par de primeiro plano e fundo da paleta, continue no Auditor de acessibilidade.

Como a paleta é calculada e o que os percentuais significam

Grupos dominantes, não pixels exatos

A imagem é desenhada em um canvas reduzido para que o maior lado tenha 420 pixels e lida em uma grade que amostra no máximo cerca de 140.000 pixels. As cores caem em baldes de 4 bits por canal; os baldes são ordenados pela contagem de pixels, e cores com distância menor que 28 são fundidas antes da escolha final de 4–12.

Cada amostra é a média do seu balde, então o resultado resume regiões dominantes. Gradientes finos, pontilhado, linhas de um pixel e bordas suavizadas podem desaparecer na redução — trate os valores como pontos de partida, não como originais medidos.

Como ler as amostras

O percentual abaixo de cada amostra é a fatia dos pixels opacos amostrados que caiu naquele balde; os números somam aproximadamente 100%. A quantidade escolhida é um máximo: uma imagem uniforme gera uma única amostra em 100%, e uma imagem com poucas cores distintas gera menos amostras.

Uma imagem totalmente transparente informa 0 cores dominantes e não mostra amostras. As amostras são botões de verdade, alcançáveis pelo teclado, e cada cópia é confirmada na linha de status — ou avisada como bloqueada quando o navegador nega o acesso à área de transferência.

Processamento local e limites práticos

A análise acontece inteiramente na aba: o navegador decodifica o arquivo, o canvas é lido por APIs de pixel e nenhuma imagem é enviada a lugar algum, então a ferramenta também funciona offline. Em um teste no Chrome para desktop, uma foto de 4000 × 3000 foi analisada em cerca de 0,2 segundo.

O limite de 40 MB existe porque a decodificação acontece no navegador. Para acessibilidade, valide cada par final de texto e fundo no verificador de contraste em vez de tratar a paleta como garantia WCAG.

Ferramentas recentes: