Extrator de paleta de cores gratuito

Como a extração de cores realmente funciona

As paletas extraídas por computador a partir de imagens vêm de um de dois algoritmos clássicos:

• Agrupamento K-means (Lloyd, 1982; a ideia subjacente remonta a MacQueen, 1967, e Forgy, 1965). Escolha K centroides de cor aleatórios no cubo de cores, atribua cada pixel ao seu centroide mais próximo, recalcule os centroides como a média dos pixels atribuídos a eles, e repita até os centroides pararem de se mover. Os K centroides finais são as suas cores dominantes.
• Quantização por corte mediano (Heckbert, SIGGRAPH 1982). Divida recursivamente o cubo de cores ao longo de sua dimensão mais larga, separando a população de pixels em duas metades iguais a cada vez. Após K divisões, você tem K caixas, e a cor média de cada caixa é uma entrada da paleta. Este é o algoritmo usado pela popular biblioteca JavaScript Color Thief, e historicamente é como as imagens de cor indexada (paletas GIF, PNG) são reduzidas de milhões de cores para 256.

Ambos os métodos produzem um pequeno conjunto de cores representativas a partir de uma população de pixels muito maior, mas fazem compromissos diferentes. O K-means é mais flexível, mas sensível à semente aleatória e aos valores atípicos. O corte mediano é determinístico e equilibra a cobertura do espaço de cor, mas pode super-representar regiões estreitas em que a imagem por acaso gasta muitos pixels.

Por que a distância RGB mente

Uma ressalva sutil, mas importante: o agrupamento no espaço RGB puro dá resultados que nem sempre correspondem à percepção humana. O RGB é um sistema de coordenadas movido pelo hardware: as distâncias nele correspondem a diferenças eletrônicas entre as primárias, não a diferenças percebidas entre as cores. Dois verdes que parecem idênticos para você podem ter uma distância RGB muito maior que a de um verde e um vermelho que parecem obviamente diferentes.

O agrupamento mais preciso acontece no CIELAB (CIE 1976 L*a*b*), um espaço de cor projetado especificamente para que a distância euclidiana no espaço aproxime a diferença percebida por humanos entre duas cores. As ferramentas de paleta modernas, como o Adobe Color e muitos geradores de amostras de design systems, agrupam em CIELAB ou CIELCH. O CSS Color Module Level 4 (W3C, 2022) acrescentou as funções lab(), lch(), oklab() e oklch() para expor esses espaços diretamente aos web designers, útil quando você quer uma interpolação de paleta perceptualmente uniforme. A especificação do CSS fica em w3.org/TR/css-color-4.

HEX, RGB, HSL: escolhendo o formato certo

As três notações descrevem a mesma cor; são formas diferentes de escrevê-la.

• HEX: #RRGGBB. Seis dígitos hexadecimais, dois por canal, faixa 00-FF (0-255). O formato mais comum da web. Compacto, fácil de copiar e colar, suportado em todo lugar.
• RGB: rgb(255, 128, 0). Os mesmos números, notação diferente. O CSS acrescenta rgba(255, 128, 0, 0.5) para o alfa.
• HSL: hsl(30, 100%, 50%). Matiz (0-360°), saturação (0-100%), luminosidade (0-100%). Mais fácil de raciocinar para designers: «mesmo matiz, mais saturação» é um ajuste de um único número no HSL, mas um ajuste multicanal no RGB.
• OKLCH: oklch(70% 0.15 30). Alternativa moderna e perceptualmente uniforme ao HSL. O mesmo número de luminosidade significa o mesmo brilho percebido entre os matizes, o que o HSL notoriamente erra (o amarelo a 50% de luminosidade parece muito mais brilhante que o azul a 50% de luminosidade).

Para a maior parte do trabalho web, copie o HEX. Para a manipulação programática de paletas (clarear em 10%, deslocar o matiz em 30°), recorra ao HSL ou ao OKLCH, onde a operação é mais limpa.

Por que dominante ≠ útil

Uma extração ingênua de «cores mais frequentes» muitas vezes decepciona. Um retrato de uma pessoa contra um céu azul é estatisticamente dominado pelos pixels do céu e pelos tons de pele, ainda que a história de cor visualmente interessante possa estar nas roupas do sujeito. As fotos com grandes fundos neutros ganham o neutro como a cor «dominante». A compressão JPEG pesada introduz cores de artefato que se agrupam como se fossem reais.

As ferramentas de paleta sofisticadas dão peso pela saturação, pelo contraste contra o fundo dominante, pelo «interesse» percebido, ou por uma cor aparecer em regiões salientes detectadas pelos modelos de saliência Itti-Koch, inspirados na visão humana. A maioria das ferramentas online, incluindo esta, usa o agrupamento simples baseado em frequência: rápido, previsível e bom o suficiente para o caso comum de extrair uma paleta de uma foto, ilustração ou obra de arte.

Casos de uso comuns

• Correspondência de marca: um designer extrai uma paleta do logotipo ou da foto principal de um cliente para manter o resto do site visualmente coerente.
• Mood boards: extrair paletas de imagens de inspiração (frames de filmes, fotografias, pinturas) é a maneira mais rápida de começar uma exploração de cores.
• Configurações de Tailwind / design tokens: transformar uma paleta extraída em propriedades personalizadas do CSS ou em um mapa colors do Tailwind.
• Correspondência de cores em apresentações de slides: escolher cores de destaque do logotipo corporativo para que a apresentação não destoe.
• Fotografia de produtos para e-commerce: usar a cor dominante de cada produto como a amostra no cartão do produto.
• Arte generativa e visualização de dados: alimentar código de shader, gráficos D3 ou sketches do Processing com paletas extraídas.
• Design para impressão: obter um conjunto inicial de cores a partir de imagens de inspiração e depois combiná-las com Pantone ou CMYK em software de design para impressão.

Por que ser só no navegador importa aqui

As fotos muitas vezes carregam mais do que apenas a imagem. Os metadados EXIF podem incluir as coordenadas GPS de onde a foto foi tirada, o número de série da câmera, o nome de quem fotografou e impressões digitais de software. As capturas de tela podem conter interfaces confidenciais, textos de rascunho ou identidade visual pré-lançamento. As fotos pessoais podem conter rostos de pessoas que não consentiram em ser enviadas para algum lugar. Extrair uma paleta não precisa de nada disso (só precisa dos dados de pixel), e não há um bom motivo para enviar a imagem inteira a um servidor quando o navegador pode analisá-la localmente.

Esta ferramenta desenha a imagem em um Canvas fora da tela, amostra os dados de pixel via getImageData(), executa o agrupamento e mostra o resultado. Nada sai da página; a imagem não é mantida depois que a aba fecha. As ferramentas de paleta do lado do servidor (Adobe Color, o seletor de imagem do Coolors e muitas outras) enviam o arquivo inteiro. A privacidade é o compromisso que você faz com cada uma.

Trabalhando com o resultado

Uma vez que você tem uma paleta extraída, os passos típicos são:

1. Faça a curadoria. Uma extração automática de 5 cores costuma ter 3 cores úteis, 1 quase duplicata redundante e 1 meio-tom enlameado. Descarte o enlameado e remova as duplicatas.
2. Atribua papéis. Designe uma cor como a cor primária da marca, uma como secundária, uma ou duas como destaques e uma como neutra. Os sistemas de marca modernos muitas vezes querem um fundo neutro, duas âncoras e um destaque, cinco no máximo.
3. Gere escalas claras/escuras. A partir de cada cor âncora, derive de 9 a 11 tons para estados de hover, fundos e variantes tingidas. Ferramentas como o gerador de escala de cores do Tailwind ou a seção de paletas do Refactoring UI têm receitas bem conhecidas.
4. Teste o contraste. Passe os pares de texto e fundo por um verificador de contraste WCAG: o Nível AA exige 4,5:1 para texto de corpo normal e 3:1 para componentes de interface grandes ou em negrito.
5. Teste para a deficiência da visão das cores. Cerca de 1 em cada 12 homens tem alguma forma de daltonismo. Passe a paleta por um simulador de daltonismo antes de fixá-la.

Erros comuns

1. Usar todas as cinco cores extraídas sem edição como a sua paleta de marca. A extração automática é um ponto de partida, não uma paleta finalizada. Faça a curadoria.
2. Escolher cores de um JPEG muito comprimido. Os artefatos de compressão produzem entradas de paleta falsas. Comece de uma fonte de alta qualidade, se puder.
3. Confiar na primeira execução em uma foto complexa. Valores de K diferentes (número de cores) produzem resultados drasticamente diferentes: experimente 5, 8 e 12 para ver qual tamanho parece certo para a sua imagem.
4. Construir uma paleta a partir de uma foto sem considerar a página em que ela vai viver. Uma paleta suave, derivada de foto, pode parecer ótima isolada, mas sumir contra um fundo de site branco. Teste no contexto.
5. Ignorar o contraste. Paletas bonitas às vezes combinam texto com um fundo em contraste de 2:1 e falham na WCAG. Sempre verifique.
6. Esquecer que «dominante» pode significar «fundo». A cor mais frequente em um retrato muitas vezes é a parede atrás do sujeito, não as roupas dele.

Mais perguntas frequentes

Vai funcionar em PNGs transparentes?

Sim. Os pixels transparentes normalmente são ignorados durante a amostragem, para que a paleta reflita apenas o conteúdo visível. Se você enviar um PNG com fundo transparente e um logotipo colorido, a paleta extraída será as cores do logotipo, não um neutro poluído.

E os GIFs animados?

O decodificador de imagem do navegador normalmente entrega o primeiro quadro à API Canvas, então a paleta é extraída do quadro zero. Para uma paleta que abranja todos os quadros, você precisaria extrair cada quadro separadamente e combinar os resultados, o que vai além do que uma ferramenta de imagem estática faz.

A imagem original é enviada para algum lugar?

Não. A imagem é carregada em um elemento Canvas no seu navegador, os dados de pixel são lidos via getImageData(), e o agrupamento roda em JavaScript no seu dispositivo. Os bytes da imagem nunca são transmitidos a nenhum servidor. Isso importa quando a fonte contém GPS de EXIF, rostos, capturas de tela de interfaces confidenciais ou imagens de produtos não lançados.

Por que a minha paleta muda entre as execuções?

O K-means depende da sua colocação inicial e aleatória de centroides, então duas execuções na mesma imagem podem cair em mínimos locais ligeiramente diferentes. As diferenças costumam ser sutis (uma quase duplicata substituída por um tom semelhante), mas visíveis. O corte mediano é determinístico: mesma entrada, mesma saída toda vez. Se a ferramenta alguma vez der paletas perceptivelmente diferentes para a mesma imagem, é porque está usando um algoritmo aleatorizado, e esse é o comportamento esperado.

Posso usar as cores extraídas comercialmente?

As cores em si não são passíveis de direitos autorais; os valores HEX são fatos sobre pixels. Mas a imagem da qual você extraiu pode ser: extrair uma paleta da fotografia de outra pessoa é aceitável como inspiração, mas reproduzir a foto ou os seus elementos com marca registrada é uma questão separada. Combine as cores, não as imagens.

Como isto difere de uma ferramenta de seletor de cores?

Um seletor de cores lê a cor em um local de pixel específico para onde você aponta. Esta ferramenta analisa a imagem inteira e retorna a paleta mais representativa. Trabalhos diferentes: os seletores são para «qual é esta cor exata?», os extratores de paleta são para «quais são as cores dominantes no geral?». Ambos têm o seu lugar no fluxo de trabalho de um designer.