Extraia as cores dominantes de qualquer imagem, com HEX, RGB e exportação para CSS e JSON.
Uma foto pode conter dezenas de milhares de cores distintas, mas o olho percebe poucas cores "dominantes" que definem o clima da imagem. Extrair uma paleta é justamente reduzir esse mar de cores a um pequeno conjunto representativo. Esta ferramenta usa quantização por corte mediano (median cut) para agrupar cores parecidas e, dentro de cada grupo, devolve o tom mais frequente (a moda), não a média, porque a média de um grupo que ainda mistura tons vira um cinza que não existe em lugar nenhum da imagem. Cada cor vem com a fatia da imagem que ela ocupa, então dá para ver o que realmente domina. Além da paleta, a ferramenta deriva papéis (vibrante, neutro, claro, escuro) e permite clicar na imagem para capturar a cor exata de um pixel. Exporte como variáveis CSS, JSON, configuração do Tailwind ou uma faixa SVG. Tudo roda no navegador; a imagem não é enviada a servidor algum.
Simplesmente contar qual cor aparece mais vezes não gera uma boa paleta: uma foto de céu retornaria vários azuis quase iguais e ignoraria o pôr do sol. O corte mediano resolve isso pensando em volume de cores. Ele coloca todos os pixels num "caixote" tridimensional (os eixos vermelho, verde e azul) e o corta repetidamente pelo eixo de maior variação, dividindo em caixas menores.
Quando há caixas suficientes (uma para cada cor pedida), a ferramenta olha dentro de cada caixa e escolhe o tom mais frequente dela, não a média. Isso importa: a média de uma caixa que ainda mistura o azul do céu e o laranja do pôr do sol é um cinza sujo que não aparece na foto. A moda é uma cor que a imagem realmente tem. Cada cor ainda carrega quantos pixels representa, e a lista sai ordenada por essa dominância.
O uso mais comum é criativo: tirar a paleta de uma foto de referência (uma paisagem, um produto, uma obra de arte) para montar um moodboard ou guiar um design com aquele clima. A partir daí, você pode escolher uma cor de acento e cores de apoio coerentes com a imagem.
Para desenvolvimento, a exportação em CSS é direta: as cores saem como variáveis (:root { --color-1: … }) prontas para virar o tema de um site. E o JSON facilita levar a paleta para um script, um design token ou uma ferramenta de build. Um clique copia o HEX de uma cor específica quando você só precisa de uma.
O número de cores muda o caráter da paleta: poucas (2–4) dão um conjunto amplo e contrastante, bom para uma identidade enxuta; muitas (8–12) capturam nuances, úteis para ilustração. Imagens com pouca variedade podem retornar menos cores do que você pediu, não há tons distintos suficientes para preencher. Pixels totalmente transparentes são ignorados, então a paleta reflete só o que é visível.
Um lembrete importante: a paleta representa as cores da imagem, mas não garante acessibilidade. Antes de usar duas cores extraídas como texto e fundo, verifique o contraste (as diretrizes WCAG pedem ao menos 4,5:1 para texto normal). Cores bonitas juntas nem sempre têm contraste suficiente para leitura.
Cole o código no seu HTML e a ferramenta aparece na sua página, sem a navegação e sem os anúncios do J-Kit. Ela continua rodando no navegador de quem visita o seu site.
<iframe
src="https://jkit.tools/embed/pt-BR/paleta-cores-imagem"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Extrator de Paleta de Cores"
></iframe>A ferramenta usa o algoritmo de corte mediano (median cut): ela divide repetidamente o espaço de cores da imagem nos eixos de maior variação e, dentro de cada grupo, devolve o tom mais frequente (a moda), não a média. Usar a média produziria cinzas apagados que não existem na imagem. Cada cor vem acompanhada da fatia da imagem que ocupa.
A análise das cores acontece inteiramente no seu navegador. Nenhuma imagem é enviada a qualquer servidor.