Grupo de um píxel
k = (⌊R ÷ 24⌋, ⌊G ÷ 24⌋, ⌊B ÷ 24⌋)
Os píxeis do mesmo grupo são mediados.
Extrator de cores de imagem
Analise localmente uma imagem PNG, JPEG ou WebP e obtenha as suas cores dominantes em HEX e RGB.
- Área de transferência
Imagem
Nenhuma imagem carregada
Arraste uma imagem para aqui
Adicione uma imagem PNG, JPEG ou WebP. O ficheiro permanece no dispositivo e todas as edições são feitas localmente no navegador.
Precisas de mais opções?
Utiliza várias ferramentas de edição num único espaço, com o ficheiro aberto e as alterações em curso.
Abrir o editor completoA processar…0 %
Esta ferramenta foi útil?
Como funciona esta ferramenta?
Uma fotografia, um cartaz ou um logótipo contém algumas cores dominantes que lhe dão identidade. Este extrator encontra-as automaticamente, de 4 a 12 à escolha, com o código hexadecimal e a parte da imagem que ocupam. Serve para levar o ambiente de uma fotografia para uma maqueta, recuperar as cores de um logótipo sem o ficheiro original ou criar uma paleta coerente com uma imagem de capa.
Importe uma imagem PNG, JPEG ou WebP, escolha o Número de cores (4, 6, 8, 10 ou 12; 6 por omissão) e clique em Extrair paleta. Para ser rápida, a análise é feita numa cópia reduzida a 420 px no lado maior; os píxeis quase transparentes são ignorados.
As cores são agrupadas em degraus de 24 níveis em cada canal vermelho, verde e azul, e cada grupo fica com a cor média dos seus píxeis. Os grupos mais numerosos são mantidos e as cores a menos de 28 de distância no espaço RGB são fundidas: dois vermelhos quase iguais contam como um só.
A paleta aparece da cor mais presente para a menos presente. Cada amostra indica o código HEX e a percentagem da imagem analisada que representa; um clique copia o código. Uma imagem com poucas cores pode devolver menos cores do que as pedidas.
Como usar esta ferramenta
Importe a imagem
Arraste uma fotografia, uma captura ou um logótipo em PNG, JPEG ou WebP.
Escolha o número de cores
4 para um logótipo simples, de 8 a 12 para uma fotografia rica em nuances.
Extraia e copie
Clique em Extrair paleta e depois numa amostra para copiar o código HEX.
Como é calculada a paleta
A extração combina uma quantização em degraus, a fusão de cores vizinhas e um cálculo de proporção.
Fusão de cores vizinhas
d = √((R1 − R2)² + (G1 − G2)² + (B1 − B2)²) < 28
Duas cores a menos de 28 são fundidas numa média ponderada.
Parte da imagem
p = nc ÷ n_opacos × 100
Arredondada à décima.
- R, G, B
- canais vermelho, verde e azul de 0 a 255
- nc
- número de píxeis atribuídos à cor
- n_opacos
- número de píxeis analisados não transparentes
Casos de uso
Levar o ambiente de uma fotografia
Recupere os tons de uma fotografia de capa para dar cor aos títulos e botões de uma página.
Recuperar as cores de um logótipo
Obtenha os códigos HEX de um logótipo de que só tem uma imagem PNG.
Verificar uma identidade visual
Confirme que um design usa de facto as cores da marca nas proporções certas.
Exemplos
Fotografia de praia com zona transparente
Os 200 píxeis transparentes ficam fora do cálculo, daí 600 ÷ 1000 = 60 %. Só existem 3 cores distintas, por isso a paleta tem 3 e não 4.
Entrada
Imagem de 1200 píxeis: 600 azul-céu (135, 206, 235), 300 areia (228, 197, 144), 100 cinzento-escuro e 200 transparentes; 4 cores pedidasResultado
#87CEEB 60 % · #E4C590 30 % · #282828 10 %Dois vermelhos quase idênticos
Os dois vermelhos estão a √(15² + 10² + 5²) ≈ 18,7 < 28: são fundidos numa média ponderada (206, 34, 32) que representa 80 % da imagem.
Entrada
500 píxeis (200, 30, 30), 300 píxeis (215, 40, 35) e 200 píxeis azuis (30, 60, 200)Resultado
#CE2220 80 % · #1E3CC8 20 %Dicas e boas práticas
- Recorte antes a imagem na zona que lhe interessa: um grande fundo branco ou um céu ficariam em primeiro lugar na paleta.
- Numa fotografia, peça mais cores do que precisa e fique com as que combinam.
- As cores extraídas são médias: para o código exato de um píxel, amplie uma zona lisa e confirme com o conversor de cores.
- Teste depois a paleta com o simulador de daltonismo se tiver de servir para distinguir informação.
Fontes e referências
- MDN Web Docs, Pixel manipulation with canvas (abre num novo separador)Página em inglês
Perguntas frequentes
Como escolhe a ferramenta as cores dominantes?
Agrupa os píxeis próximos em degraus de 24 níveis por canal, mantém os grupos mais numerosos, funde as cores demasiado parecidas e ordena o resultado pela parte da imagem.
Porque obtenho menos cores do que as pedidas?
Porque a imagem não tem cores distintas suficientes: depois de fundir os tons vizinhos podem restar menos cores do que o número escolhido.
O que indica a percentagem?
A parte dos píxeis analisados, sem contar os transparentes, atribuídos a essa cor. A soma pode ficar abaixo de 100 % quando as cores secundárias não são mostradas.
Os códigos são exatos ao píxel?
São médias de grupos de píxeis calculadas numa cópia reduzida a 420 px. Refletem fielmente o ambiente, não o valor de um píxel isolado.
As zonas transparentes contam?
Não. Os píxeis com opacidade muito baixa são ignorados, para que um logótipo recortado não devolva preto ou branco indesejados.
A minha imagem é enviada para um servidor?
Não. A amostragem e o cálculo da paleta acontecem no seu navegador.
Ferramentas relacionadas
Continue com estas ferramentas
Ferramentas semelhantes ou complementares a esta.
Ferramentas semelhantes
Crie uma paleta complementar, análoga, triádica ou monocromática a partir de uma cor.
Imagens e gráficosUtilizar esta ferramenta
Converta uma cor entre HEX, RGB e HSL com os respetivos valores equivalentes.
Imagens e gráficosUtilizar esta ferramenta
Visualize uma imagem como pode ser percecionada com diferentes tipos de daltonismo.
Imagens e gráficosUtilizar esta ferramenta
Leia também
ReferênciaConceitos e tecnologiasIniciante
Como é construída uma imagem digital?
Compreenda como píxeis, canais de cor, profundidade e transparência se combinam para formar uma imagem apresentada no ecrã.
31 de agosto de 20263 min
GuiaBoas práticasIniciante
Como criar uma paleta de cores a partir de uma imagem?
Extraia as cores dominantes de uma imagem, atribua-lhes funções e construa uma paleta coerente sem confundir frequência com importância visual.
31 de agosto de 20264 min
ReferênciaConceitos e tecnologiasIniciante
RGB, HEX ou HSL: que notação escolher?
Compreenda como RGB, HEX e HSL descrevem cores sRGB para escolher uma notação CSS legível e converter valores sem confusão.
31 de agosto de 20263 min
GuiaBoas práticasIntermédio
Imagens responsivas: compreender srcset e sizes
Compreenda como srcset e sizes permitem ao navegador escolher uma imagem adequada à largura de apresentação, densidade de píxeis e contexto responsive.
31 de agosto de 20263 min