Extrator de Cores de Imagem & Paleta

Extrator de Cores de Imagem & Paleta

Extraia paletas de cores de imagens instantaneamente. Gere amostras dominantes em HEX, RGB e HSL, exporte tokens CSS e Tailwind e teste o contraste de acessibilidade WCAG.

Carregar Exemplo
Parâmetros e Entradas

Arraste e solte uma imagem aqui

PNG, JPG, WebP ou SVG até 20MB (100% processamento local)

6
361216
14
01430
2.0x
1.0x2.0x3.5x
Resolução da Amostra:
Fluxo de Extração de CoresEtapa 1: Amostragem de Pixels no Canvas46,080 pxEtapa 2: Quantização de Cores (K-Means)CIEDE2000Etapa 3: Cálculo de Harmonias e Luminância12 boxes • k=6Etapa 4: Geração de Tokens e Auditoria WCAG6 Swatches • ΔE=14
Resolução da Imagem: 256×180px
Total de Pixels Amostrados: 46,080|Privacidade 100% no Navegador
42.5%
21%
16.5%
10.2%
#0D0E1542.5%
Base Canvas
#00F0FF21%
Primary Accent
#FF007F16.5%
Secondary Accent
#7928CA10.2%
Muted Surface
#FEE75C5.8%
Highlight Glow
#1F23384%
Card Border
Escala de Tons e Sombras (Tints & Shades)#00F0FF
50#EEFBFB
100#D8F6F8
200#A8EEF3
300#74EBF3
400#3CEBF7
500#00F0FF
600#00BBC9
700#008993
800#00565C
900#002426
Função Semântica: #00F0FF|Primary Accent
Contraste Máximo: 15.4:1|Saturação Dominante: 70%
Métrica Principal46,080
Eficiência / Capacidade70%
Resultado Líquido15.4:1
Cores Extraídas6 / 6
Diferença de Cor (Delta E)14
Resolução da Imagem256×180px

Processamento no Navegador

Cálculo de alto desempenho executado inteiramente na memória do navegador.

Zero Upload para Servidor

Todos os dados permanecem estritamente locais, sem comunicação com servidores externos.

Pronto para Produção

Formatos de saída limpos e otimizados para integração imediata em código.

ToolsAA•Utilitários web 100% privados no cliente
Referência técnica e guia de arquitetura

Extrator de Cores & Paleta de Imagem — Guia de referência

Extraia paletas de cores de imagens instantaneamente. Gere amostras dominantes em Hex, RGB e HSL, exporte tokens para CSS ou Tailwind e valide o contraste de acessibilidade WCAG.

Extrator de Cores & Paleta de Imagem — Guia de referência — Arquitetura em memória do lado do cliente e fluxo de dados
Extrator de Cores & Paleta de Imagem — Guia de referência — Arquitetura em memória do lado do cliente e fluxo de dados

Parâmetros-chave e controles

Quantidade de Amostras Dominantes (Tamanho de Cluster k)Escala de Paleta (3 a 16 Amostras)

A quantidade alvo de centroides de cor discretos extraídos da imagem. Para espaços residenciais harmoniosos, álbuns fotográficos de família e sistemas de design digital, de 5 a 7 cores estabelecem o equilíbrio estético ideal entre fundo da tela, superfícies de cartões, tom focal primário, realces secundários vibrantes e elementos de texto de alto contraste.

Padrão: 6
Algoritmo de Quantização de Cores (Motor de Extração)Modelo de Clusterização (Median Cut | K-Means | Saturation Boost)

A metodologia matemática de agrupamento utilizada para isolar tonalidades: o Modified Median Cut subdivide recursivamente caixas delimitadoras RGB para capturar detalhes de destaque vívidos; o K-Means agrupa pixels pelo centroide euclidiano mais próximo no espaço CIELAB para refletir a real prevalência estatística; o Saturation Boost amplifica pixels saturados por um peso exponencial (S^1.5) para evitar que texturas de fundo desbotadas ofusquem as cores vibrantes do tema principal.

Padrão: Median Cut
Limiar de Diferença Perceptual de Cor (Delta-E ΔE*ab)Métrica de Distância CIELAB (4.0 a 30.0 ΔE)

A distância perceptual mínima de cor exigida entre as amostras extraídas no espaço de cores uniforme CIELAB. Valores abaixo de 2,0 são praticamente imperceptíveis ao olho humano, valores entre 5,0 e 12,0 representam tons confortavelmente distintos e harmoniosos, enquanto valores acima de 15,0 evitam redundância visual e garantem clareza com alto contraste na paleta.

Padrão: 12.0
Resolução de Análise por SubamostragemDimensão da Grade de Amostragem (128px a 512px)

A dimensão máxima normalizada da tela de processamento utilizada para análise de pixels. A redução por subamostragem para 256px analisa 65.536 pixels de amostra em menos de 16 milissegundos sem causar lentidão no dispositivo ou consumo excessivo de bateria, preservando a distribuição de cor natural e o equilíbrio tonal exato de fotografias de múltiplos megapixels.

Padrão: 256px
Limiar de Corte de Transparência AlfaLimiar de Canal Alfa (0 a 255 Níveis)

O limite de opacidade abaixo do qual pixels semitransparentes são filtrados ou compostos sobre um fundo neutro limpo. Definir um corte alfa em 128 (50% de opacidade) evita que bordas de PNG transparente, marcas d'água e franjas de sombra projetada corrompam sua paleta com amostras artificiais em preto absoluto (#000000) ou cinza turvo.

Padrão: 128

Dicas profissionais e melhores práticas

O Agrupamento Perceptual em CIELAB Supera o RGB Matemático

Fórmulas convencionais de distância RGB (sqrt(ΔR² + ΔG² + ΔB²)) não refletem a biologia visual humana, pois os cones da retina são substancialmente mais sensíveis a variações no comprimento de onda verde (555 nm) do que no azul ou vermelho. Realizar a clusterização em um espaço de cor perceptualmente uniforme como CIELAB ou OKLAB elimina artefatos marrons turvos e reproduz com fidelidade como os olhos humanos percebem a vivacidade das cores na fotografia natural.

Evite Paletas Apagadas com Ponderação Não Linear de Saturação

Em fotografias ao ar livre, de paisagens e estilo de vida, de 60% a 80% dos pixels pertencem a céus desbotados, asfalto, sombras de folhagem ou paredes internas. A contagem simples de frequência costuma gerar uma paleta sem vida de cinco cinzas quase idênticos. A aplicação de ponderação de saturação não linear (multiplicando o peso do voto do pixel por S^1.5) garante que os pontos focais vibrantes — como o casaco de um corredor ou o arranjo floral aconchegante da sala — sejam priorizados ao lado dos tons dominantes de fundo.

Aplique a Regra de Luminância Relativa 0.18 da WCAG para Contraste de Texto

Nunca aplique texto em branco puro (#FFFFFF) sobre tons médios extraídos sem mensurar a luminância relativa. Pelos critérios da WCAG 2.1, textos de corpo padrão acessíveis exigem uma taxa mínima de contraste de 4.5:1, enquanto títulos em negrito ou 18pt+ exigem 3.0:1. Se uma amostra extraída tiver luminância relativa (L) superior a 0,18, o texto branco puro reprova imediatamente na acessibilidade; combine-a com texto ardósia escuro (#0F172A) para evitar fadiga ocular.

Elimine Halos Negros em PNGs Transparentes com Máscara Alfa

Ao processar gráficos PNG transparentes, os renderizadores digitais interpretam pixels totalmente transparentes como RGBA(0, 0, 0, 0). Sem uma máscara de corte alfa explícita, um ícone com extensas áreas transparentes produzirá incorretamente o preto absoluto (#000000) como amostra dominante. Definir um limiar alfa de 128 ou mesclar contra uma base branca sólida elimina por completo os halos escuros nas bordas.

Adote a Regra de Harmonia 60-30-10 em Decoração e Interfaces

Ao aplicar a paleta extraída de uma foto na decoração de ambientes residenciais, lâminas de apresentação ou interfaces digitais, reserve aproximadamente 60% do espaço visual para a cor neutra dominante, 30% para um tom estrutural secundário e 10% para a cor de destaque de maior saturação. Essa proporção clássica reflete a harmonia visual da natureza e evita a sobrecarga sensorial aos olhos.

Armadilhas comuns e solução de problemas

⚠️As cores extraídas parecem muito semelhantes ou aparecem como tons duplicados de cinza escuro

Aumente o Limiar de Tolerância Perceptual Delta-E para 15.0 ou 18.0 e alterne o motor de extração de K-Means para Modified Median Cut. Isso força o algoritmo a mesclar tons vizinhos visualmente indistinguíveis e a percorrer espectros cromáticos mais amplos, garantindo rica diversidade entre claros e escuros.

⚠️O navegador exibe um SecurityError ou aviso de canvas contaminado (tainted canvas) ao carregar uma URL de imagem

Os navegadores aplicam políticas rígidas de segurança entre origens (CORS) que impedem a extração de cores quando as imagens são carregadas de servidores terceiros sem cabeçalhos de permissão. Para resolver isso, salve a imagem localmente e use o seletor de upload, arraste e solte o arquivo diretamente no navegador, ou cole-o direto da área de transferência (Ctrl+V / Cmd+V) para análise instantânea no cliente.

⚠️Fotos de celular em alta resolução de 48 MP ou arquivos RAW causam travamentos temporários no navegador

Imagens capturadas em altíssima resolução contêm mais de 40 milhões de pixels individuais. Embora o extrator de paleta aplique automaticamente uma redução para uma grade de amostragem otimizada de 256px, processar arquivos muito pesados em dispositivos móveis pode gerar atrasos momentâneos. Certifique-se de que a aceleração gráfica por hardware esteja ativada nas configurações do seu navegador ou reduza o tamanho da imagem antes do envio.

⚠️As amostras de cores Hex extraídas parecem ligeiramente desbotadas em comparação com a foto original em telas modernas

Modelos recentes de iPhones, iPads e monitores profissionais capturam e exibem fotos na ampla gama de cores Display P3, enquanto as amostras digitais padrão utilizam o espaço sRGB. Ao trabalhar com tons neon, carmesim profundo ou pores do sol vibrantes, ative o modo de cor Wide Gamut P3 nas configurações da paleta ou exporte os valores no formato CSS color(display-p3 r g b) para preservar a saturação real da tela.

Perguntas frequentes (FAQ)

Como extrair uma paleta de cores de uma imagem via código?▼

Para extrair uma paleta de uma imagem, renderize a imagem em um elemento HTML canvas, obtenha os dados brutos de pixels RGBA via getImageData(), calcule um histograma de frequência cromática e agrupe as coordenadas adjacentes usando algoritmos como Modified Median Cut ou K-Means no espaço CIELAB. Para designers e criadores no dia a dia, ferramentas modernas no lado do cliente executam todo esse processamento matemático no próprio navegador em menos de 16 milissegundos, sem enviar fotos pessoais confidenciais para servidores externos.

Qual é o melhor algoritmo para extrair cores dominantes de imagens?▼

O Modified Median Cut (MMC) é considerado o algoritmo padrão-ouro para gerar paletas equilibradas e visualmente diversas, pois divide iterativamente as caixas delimitadoras de cores ao longo do eixo cromático mais amplo, impedindo que detalhes de destaque sejam ofuscados por fundos extensos. Quando o objetivo é a prevalência estatística e a frequência matemática pura, o agrupamento K-Means com 5 a 8 centroides proporciona a maior fidelidade fotográfica.

Qual é a diferença entre a clusterização RGB e a extração de cores CIELAB Delta-E?▼

A diferença fundamental é que o RGB afere a emissão física de luz do monitor em uma grade não uniforme, enquanto o CIELAB Delta-E (ΔE) mensura a percepção visual uniforme do olho humano. No RGB convencional, uma variação de 10 pontos no verde parece muito mais intensa aos olhos humanos do que a mesma variação no azul, gerando amostras turvas ou duplicadas; o CIELAB modela a resposta dos cones oculares para que distâncias matemáticas iguais correspondam a variações de cor percebidas de forma equivalente.

Como garantir que uma paleta de cores extraída atenda aos padrões de acessibilidade WCAG?▼

Para assegurar que a paleta atenda às diretrizes de acessibilidade WCAG 2.1, calcule a luminância relativa (L) de cada amostra pela fórmula L = 0.2126*R_lin + 0.7152*G_lin + 0.0722*B_lin e calcule a taxa de contraste com a superfície de fundo por (L_mais_claro + 0.05) / (L_mais_escuro + 0.05). Elementos de texto devem atingir pelo menos 4.5:1 de contraste para texto de corpo normal e 3.0:1 para títulos grandes com 18pt ou mais (ou 7.0:1 para conformidade rigorosa AAA); caso a amostra não atinja o requisito, ajuste a luminosidade ou alterne a cor do texto entre ardósia escuro (#0F172A) e branco nítido (#FFFFFF).

Quantas cores devem compor uma paleta harmoniosa e equilibrada?▼

Uma paleta equilibrada costuma ser composta por 5 a 6 cores: uma base primária dominante (60% de cobertura), um ou dois tons secundários de suporte para superfícies (30% de cobertura), uma cor de destaque vibrante (10% de cobertura) e dois tons neutros de alto contraste para textos (um claro e um escuro). Seguir a consagrada regra 60-30-10 de design de interiores e design gráfico garante harmonia visual e evita sobrecarregar os usuários com poluição cromática.

Ferramentas e utilitários relacionados

Todas as ferramentas →
Calculadora de Proporção Áurea & PhiDesign

Calcule dimensões na proporção áurea e retângulos dourados instantaneamente. Divida comprimentos por phi (1,618), dimensione escalas tipográficas e gere grids responsivos para layouts.

Abrir ferramenta→
Gerador Neumorfismo CSS & Soft UIDesign

Crie sombras suaves em relevo, rebaixadas e planas com nosso Gerador de Neumorfismo CSS. Copie código limpo e ajuste ângulo, desfoque e contraste em tempo real.

Abrir ferramenta→
Gerador de Paletas de Cores & HarmoniasDesign

Gere esquemas e harmonias de paletas de cores instantaneamente. Crie paletas complementares, análogas, triádicas e meio-complementares com verificação de contraste WCAG em tempo real e exportação CSS.

Abrir ferramenta→
Gerador Glassmorphism CSS & Vidro FoscoDesign

Gere código CSS moderno de glassmorphism e vidro fosco com ajustes em tempo real de desfoque backdrop-filter, opacidade, borda e sombra. Copie HTML e CSS limpos.

Abrir ferramenta→
Comprimir Imagens & Reduzir FotosDesign

Comprima imagens online sem perda de qualidade. Reduza tamanhos de JPG, PNG e WebP direto no navegador, sem upload para servidores, com ajuste exato de KB e exportação em lote ZIP.

Abrir ferramenta→
Gerador Interativo de Gradientes CSS Lineares e RadiaisDesign

Todo processamento e conversão acontecem exclusivamente na memória do seu navegador sem envio para servidores.

Abrir ferramenta→