Paleta de cores de uma imagem: cores dominantes com códigos

Como usar

Clique em Escolher um arquivo ou arraste uma imagem para a caixa. A foto é lida no seu dispositivo.
Escolha o Número de cores, de 5 a 10. Uma foto movimentada precisa de mais cores.
Leia cada cor: o código hexadecimal, os valores RGB e HSL e a sua parcela da imagem. Clique no botão de copiar ao lado de uma cor para copiar o código hexadecimal dela.
Em Exportar a paleta, use Copiar como variáveis CSS, Copiar como lista ou Baixar amostras (PNG).

Como as cores são encontradas

Cada pixel é convertido para CIE L*a*b*, um espaço de cor em que a distância entre duas cores fica próxima de quão diferentes elas parecem ao olho. Os pixels são então agrupados no número de cores escolhido pelo agrupamento k-means, que posiciona o centro de cada grupo de modo que os pixels fiquem o mais perto possível desse centro.

Os centros iniciais são escolhidos pelo método k-means++, com uma semente fixa, então a mesma foto sempre dá a mesma paleta. Cada cor é a média dos pixels do seu grupo, e sua parcela é o número desses pixels dividido por todos os pixels.

Pixel → (L*, a*, b*)
Grupos: cada pixel entra no centro mais próximo; os centros são as médias dos seus pixels
Cor = RGB médio do grupo; parcela = pixels do grupo ÷ todos os pixels

A foto é analisada como uma cópia de até cerca de 2 megapixels, o que mantém rápidas as fotos grandes.
Tons muito parecidos podem ficar numa mesma cor. Uma paleta de 10 pode separar em duas uma mesma cor, quando a foto tem muitos tons dela.

Códigos, parcelas e o que significam

O código hexadecimal é a cor escrita em três pares de dígitos hexadecimais para vermelho, verde e azul; os valores RGB são os mesmos números em decimal. O HSL dá o matiz como um ângulo na roda de cores (0 é vermelho, 120 verde, 240 azul), a saturação como a sua força e a luminosidade como o quanto ela é clara.

A parcela é a fração dos pixels da imagem que pertencem a uma cor, isto é, a área que ela ocupa. Um ponto pequeno e brilhante pode ser uma cor de parcela pequena, e um fundo grande e suave pode ter uma parcela grande feita de vários tons parecidos.

Copie as variáveis CSS para usar as cores numa página ou num projeto: cada cor vira --color-1, --color-2 e assim por diante.
A faixa de PNG serve para um quadro de inspiração ou uma impressão: uma amostra por cor, com o código hexadecimal embaixo.

Exemplo resolvido: blocos de vermelho, azul e verde

Uma imagem de teste com 50 pixels vermelhos, 30 azuis e 20 verdes dá exatamente três cores, porque cada bloco é uma cor chapada. Pedidas seis cores, a ferramenta ainda retorna essas três, sem cores inventadas.

A lista é ordenada da maior parcela para a menor, e cada código é a cor exata do seu bloco.

Cor	Hex	RGB	HSL	Parcela
Vermelho	#FF0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)	50,0%
Azul	#0000FF	rgb(0, 0, 255)	hsl(240, 100%, 50%)	30,0%
Verde	#00FF00	rgb(0, 255, 0)	hsl(120, 100%, 50%)	20,0%

Perguntas frequentes

As cores são exatas em relação à foto?

Uma área chapada dá a sua cor exata. Uma foto com degradês dá a média de cada grupo, que é um resumo justo da imagem, mas não de cada tom dela.

Por que a paleta fica sempre igual?

O agrupamento começa de uma semente fixa, então a mesma foto e o mesmo número de cores sempre dão a mesma paleta. Trocar a foto ou o número de cores muda o resultado.

Quantas cores devo escolher?

Cinco cores captam o clima principal da maioria das fotos. Use de 8 a 10 para uma imagem movimentada ou quando precisar de mais tons para uma pintura ou um projeto.

A minha foto é enviada para algum lugar?

Não. A foto é lida pelo seu navegador, a paleta é calculada no seu dispositivo, e nada é enviado para nós.

Qual é a diferença entre hex, RGB e HSL?

Eles descrevem a mesma cor de três formas: hex e RGB listam as quantidades de vermelho, verde e azul, em hexadecimal e em decimal. O HSL descreve matiz, saturação e luminosidade, o que é mais fácil de ajustar a olho.

Fontes

Números e texto verificados pela última vez em terça-feira, 10 de novembro de 2026.