Como tirar uma paleta de cores de uma imagem?

Solte a imagem nesta página. As cores dominantes aparecem na hora, ordenadas pela área da imagem que ocupam, e você pode mudar quantas quer, copiar cada uma em HEX, RGB ou HSL e exportar o conjunto como CSS, Tailwind ou JSON.

Como descobrir o código HEX de uma cor em uma foto?

Carregue a foto e clique no ponto exato que você quer. O conta-gotas mostra os valores HEX, RGB e HSL desse pixel, e clicar em qualquer valor o copia.

Como as cores dominantes são calculadas?

A imagem é reduzida e seus pixels são agrupados com k-means no espaço de cor OKLab, que mede a diferença entre cores do jeito que as pessoas a percebem. A cor média de cada grupo vira uma amostra, ordenada pela proporção de pixels que contém.

Por que recebo cores um pouco diferentes de outra ferramenta?

Cada extrator agrupa pixels parecidos de um jeito, e as amostras são médias desses grupos, não pixels individuais. A inicialização desta ferramenta é determinística, então a mesma imagem sempre dá o mesmo resultado aqui. Use o conta-gotas quando precisar do valor exato de um pixel.

Posso exportar a paleta para o Tailwind CSS?

Sim. Escolha Tailwind v3 config para um objeto colors a colar no tailwind.config.js, ou Tailwind v4 @theme para a configuração CSS-first, e copie ou baixe o código.

Funciona com PNGs transparentes e logotipos?

Sim. Pixels quase totalmente transparentes são ignorados, então a paleta reflete a arte visível e não o fundo vazio.

Minha imagem é enviada?

Não. A imagem é decodificada e analisada no seu navegador e nunca sai do seu dispositivo.

Gerador de Paleta de Cores a partir de Imagem

Extraia as cores dominantes de qualquer foto em HEX, RGB e HSL. Tudo roda localmente — nada é enviado para servidor nenhum.

Entrada: PNG · JPEG · WebP · GIF · SVG
Saída: HEX · RGB · HSL · CSS · JSON

Solte uma imagem

Uma foto, uma captura de tela ou um logotipo: PNG, JPEG, WebP, GIF ou SVG. Você também pode colar uma imagem.

Tire uma paleta de cores de qualquer imagem

Solte uma foto, uma captura de tela ou um logotipo e este gerador de paleta de cores extrai as cores dominantes, ordenadas pela área da imagem que cada uma ocupa. Escolha de 3 a 12 amostras, copie qualquer uma em HEX, RGB ou HSL, clique em qualquer ponto da imagem para pegar um pixel exato e exporte a paleta como variáveis CSS, SCSS, configuração do Tailwind, JSON ou uma faixa PNG. A imagem é analisada no seu próprio dispositivo e nunca é enviada.

Como extrair as cores de uma imagem

Solte uma imagem na página, escolha uma nos seus arquivos ou cole direto da área de transferência. PNG, JPEG, WebP, GIF e SVG funcionam.
Ajuste Cores para o número de amostras que você quer. A faixa acima da lista mostra cada cor na proporção que ocupa na imagem.
Clique em um valor para copiá-lo em HEX, RGB ou HSL.
Precisa de um ponto específico, como a cor de um botão em uma captura de tela? Clique nesse ponto da imagem para amostrá-lo e adicione-o à paleta com o botão de mais.
Escolha um formato de exportação e copie o código, ou baixe a paleta como faixa PNG.

Como as cores dominantes são encontradas

Uma foto pode facilmente ter cem mil cores diferentes, quase todas pequenas variações umas das outras. Para achar as poucas que importam, a imagem é reduzida e cada pixel é agrupado com os que mais se parecem com ele, usando um método chamado agrupamento k-means. Cada grupo vira uma amostra: a média dos seus pixels, ordenada pela quantidade de pixels que contém.

Dois detalhes deixam o resultado melhor que o de um seletor ingênuo. Primeiro, as cores são comparadas em OKLab, um espaço de cor feito para que distâncias iguais pareçam diferenças iguais ao olho. Agrupar em RGB puro costuma dividir os verdes em muitos tons quase idênticos e juntar azuis bem distintos. Segundo, os pontos de partida são escolhidos de forma determinística, favorecendo cores que são comuns e distantes das já escolhidas, então a mesma imagem sempre dá a mesma paleta e um destaque pequeno mas vivo, como um logotipo vermelho numa parede cinza, não é engolido pelo fundo.

Pixels transparentes são ignorados, então um logotipo em PNG transparente dá as cores do logotipo, e não uma amostra de preto.

HEX, RGB e HSL: qual copiar

Precisa de OKLCH, CMYK ou HSV, ou de um tom mais claro de uma das amostras? Cole o valor HEX no conversor de cores, que mostra todas as notações junto com tons claros, tons escuros e harmonias de cores.

HEX: #2a9d8f. Seis dígitos hexadecimais para vermelho, verde e azul. A forma mais compacta, aceita por toda ferramenta de design e pelo CSS.
RGB: rgb(42, 157, 143). Os mesmos três canais como números de 0 a 255. Prático em código que faz contas com cores ou em ferramentas que pedem valores separados.
HSL: hsl(173 58% 39%). Matiz, saturação e luminosidade. A notação mais fácil de ajustar à mão: aumente a luminosidade para um estado de hover, diminua a saturação para uma variante mais apagada.

Formatos de exportação

Variáveis CSS: um bloco :root com --palette-1, --palette-2 e assim por diante, pronto para qualquer folha de estilo.
SCSS: variáveis no estilo $palette-1 para projetos Sass.
Configuração do Tailwind v3: um objeto theme.extend.colors para o tailwind.config.js, que gera classes como bg-palette-1.
Tailwind v4 @theme: propriedades personalizadas --color-palette-1 para a configuração CSS-first do Tailwind 4.
JSON: um array com o HEX, o RGB e o HSL de cada cor, para scripts e design tokens.
Faixa PNG: as amostras lado a lado em uma imagem, para um mood board, um briefing ou uma mensagem de chat.

Dicas para uma paleta útil

Menos cores para identidade de marca, mais para ilustração. Cinco ou seis amostras costumam captar o clima de uma foto; aumente para 10 ou 12 quando precisar também dos tons de apoio.
Recorte antes. Um céu grande ou uma borda branca de página dominam o resultado. Recorte a parte da imagem que interessa para ter uma paleta que a represente.
Confira as cores de texto antes de usá-las. Cores tiradas de uma foto raramente têm contraste suficiente para texto. Passe qualquer par em que você pretende colocar texto pelo verificador de contraste.
Use o conta-gotas para valores exatos. As cores dominantes são médias. Quando precisar da cor precisa de um pixel, como a de um logotipo ou de um elemento de interface em uma captura de tela, clique nele.

Perguntas frequentes

Como tirar uma paleta de cores de uma imagem?: Solte a imagem nesta página. As cores dominantes aparecem na hora, ordenadas pela área da imagem que ocupam, e você pode mudar quantas quer, copiar cada uma em HEX, RGB ou HSL e exportar o conjunto como CSS, Tailwind ou JSON.
Como descobrir o código HEX de uma cor em uma foto?: Carregue a foto e clique no ponto exato que você quer. O conta-gotas mostra os valores HEX, RGB e HSL desse pixel, e clicar em qualquer valor o copia.
Como as cores dominantes são calculadas?: A imagem é reduzida e seus pixels são agrupados com k-means no espaço de cor OKLab, que mede a diferença entre cores do jeito que as pessoas a percebem. A cor média de cada grupo vira uma amostra, ordenada pela proporção de pixels que contém.
Por que recebo cores um pouco diferentes de outra ferramenta?: Cada extrator agrupa pixels parecidos de um jeito, e as amostras são médias desses grupos, não pixels individuais. A inicialização desta ferramenta é determinística, então a mesma imagem sempre dá o mesmo resultado aqui. Use o conta-gotas quando precisar do valor exato de um pixel.
Posso exportar a paleta para o Tailwind CSS?: Sim. Escolha Tailwind v3 config para um objeto colors a colar no tailwind.config.js, ou Tailwind v4 @theme para a configuração CSS-first, e copie ou baixe o código.
Funciona com PNGs transparentes e logotipos?: Sim. Pixels quase totalmente transparentes são ignorados, então a paleta reflete a arte visível e não o fundo vazio.
Minha imagem é enviada?: Não. A imagem é decodificada e analisada no seu navegador e nunca sai do seu dispositivo.

Ferramentas relacionadas

Ver todas as ferramentas

Conversor de CoresConverta cores entre HEX, RGB, HSL, HSV, CMYK e OKLCH.Verificador de Contraste WCAGVerifique as cores de texto e fundo pelos níveis WCAG AA e AAA.Conversor de imagensRecodifique, redimensione e vetorize imagens com uma comparação antes/depois ao vivo.Gerador de FaviconTodos os tamanhos de favicon, um .ico multitamanho de verdade e um web manifest a partir de uma imagem.Conversor de dadosConverta texto estruturado entre JSON, YAML, TOML, CSV e Markdown.Comprimir e arquivarReduza qualquer arquivo com gzip ou Brotli, ou junte uma pasta em um ZIP.