Como criar uma paleta de cores a partir de uma imagem?

Uma fotografia pode conter centenas de milhares de cores ligeiramente diferentes. Quando queremos usá-la como inspiração para uma interface, identidade visual ou apresentação, procuramos algumas cores capazes de resumir o ambiente da imagem.

É precisamente esse o papel de uma paleta extraída de uma imagem.

O que é uma paleta de cores?

É um conjunto limitado de cores selecionadas para representar ou construir uma identidade visual. Pode conter uma cor principal, secundária, uma ou duas cores de destaque, tons claros e escuros e cores neutras.

Uma boa paleta não corresponde necessariamente aos cinco píxeis mais frequentes; procura um resumo visual utilizável.

Pode experimentar este princípio com o extrator de cores de imagem e o gerador de paletas.

Porque não basta contar cores exatas?

Uma zona que o olho percebe como azul pode conter milhares de valores RGB próximos devido à luz, ruído, gradientes e compressão. Para uma contagem exata são cores diferentes; para uma pessoa pertencem à mesma família.

É por isso necessário agrupar cores próximas através de quantização.

Quantização de cores

A quantização reduz o número de cores distintas usadas para representar a imagem. Em vez de preservar milhares de variações quase idênticas, identifica grupos e escolhe uma cor representativa de cada um.

Para design, cinco a oito cores bem distintas são normalmente mais úteis do que cinquenta tonalidades.

O problema da “cor dominante”

“Dominante” pode significar a cor exata mais frequente, a família que ocupa maior área, a cor que mais atrai o olhar ou a que melhor define a identidade visual. Estas respostas podem divergir.

Num cartaz com 70% de fundo branco e um pequeno título vermelho, o branco domina numericamente, mas o vermelho pode ser a cor que caracteriza realmente o design.

Cor dominante e cor de destaque

Uma cor dominante ocupa normalmente grande parte da imagem. Uma cor de destaque pode ocupar uma área reduzida e ainda assim chamar muito a atenção. Numa fotografia de floresta com um casaco vermelho, cinco verdes não formam necessariamente uma paleta útil: convém preservar também o vermelho.

Um algoritmo pode, portanto, diversificar a seleção, eliminando candidatos demasiado semelhantes e mantendo cores mais distintivas.

Distância entre cores

Uma distância RGB simples pode ser calculada como:

√((R1-R2)² + (G1-G2)² + (B1-B2)²)

É útil, mas RGB não é perceptualmente uniforme. Duas diferenças numericamente iguais podem parecer muito diferentes ao olho. Espaços de cor modernos podem medir melhor a diferença percebida.

HSL é prático para editar matiz, saturação e luminosidade, mas também não é perceptualmente uniforme. O guia RGB, HEX e HSL explica estas representações.

Como funciona um extrator de cores?

Um fluxo típico é:

1. descodificar a imagem;
2. amostrar ou reduzir os píxeis;
3. agrupar cores próximas;
4. medir a importância dos grupos;
5. diversificar a seleção;
6. apresentar os resultados em HEX, RGB ou HSL.

Analisar todos os píxeis de uma fotografia com 24 milhões de píxeis nem sempre é necessário para encontrar cinco cores dominantes. Uma versão reduzida pode conservar informação suficiente sobre as grandes áreas cromáticas e tornar o processamento local mais rápido.

Atenção aos fundos neutros

Um fundo branco ou cinzento muito grande pode ocupar a maioria dos píxeis e esconder cores mais características. Mas não se deve remover automaticamente branco e preto: numa fotografia minimalista podem ser essenciais.

A estratégia depende do objetivo: incluir os neutros, reduzir o seu peso ou reservar uma posição para uma cor saturada e distintiva.

Da paleta extraída para uma interface

Uma paleta automática é um ponto de partida. Para a usar numa interface, atribua funções claras: principal, destaque, fundo, texto, bordas, sucesso, aviso e erro.

Depois verifique contraste e legibilidade separadamente. Uma combinação harmoniosa não garante texto acessível. Consulte também o guia de contraste WCAG.

Método prático

1. Extraia 6–10 cores em vez de parar logo em 3.
2. Elimine quase duplicados.
3. Preserve pelo menos um neutro se a interface precisar dele.
4. Escolha uma cor de destaque realmente distinta.
5. Atribua uma função a cada cor.
6. Verifique o contraste texto/fundo.
7. Teste a paleta em componentes reais, não apenas em amostras lado a lado.

A extração automática resume uma imagem; a escolha final continua a ser uma decisão de design.