Como extrair uma paleta de cores de uma foto e verificar se ela serve para texto

Uma fotografia é um bom lugar para encontrar cores que combinam e um lugar ruim para encontrar uma cor de texto. Os motivos são mecânicos: o que um extrator faz com os pixels e do que as fotografias são feitas. Este guia mostra o seletor de cores de imagem e, depois, os números por trás da linha de contraste que ele mostra abaixo de cada paleta.

Extraindo a paleta

1. Carregue a foto. Solte-a no painel que diz “Drop an image here” (solte uma imagem aqui) ou pressione Browse image (procurar imagem). Qualquer coisa que o seu navegador consiga decodificar funciona; se ele não conseguir ler o arquivo, a ferramenta pede um PNG, JPEG, WebP ou SVG. Replace (substituir) e Remove (remover) aparecem sobre a imagem depois que ela é carregada.
2. Escolha a extração. Dominant, Distinct ou Accessible (dominante, distinta ou acessível), em Extraction (extração). A frase abaixo dos botões diz o que o modo atual faz, e a tecla M alterna entre eles.
3. Defina quantas cores. Os botões − e + ao lado de Colours (cores) vão de 2 a 10. O valor inicial é 5.
4. Leia cada linha. Cada amostra mostra o código hex, a participação dela na imagem em porcentagem e a razão de contraste contra o branco.
5. Leia a linha abaixo da lista. Ela diz quantas amostras reprovariam como texto de corpo sobre branco e, se algum par ficar difícil de distinguir com daltonismo simulado, quantos pares.
6. Troque para Accessible se o texto vai ficar sobre branco, e depois exporte. Export (exportar) copia a paleta como CSS, OKLCH, Tailwind v4, SCSS, JSON, tokens do Figma ou amostras em SVG, e Save here (salvar aqui) a guarda neste dispositivo.

Há dois links abaixo da lista. Check colour vision (verificar visão de cores) abre as amostras no simulador de daltonismo, e Build a ramp (montar uma escala) leva a primeira amostra para o gerador de escalas e tokens. A ferramenta guarda uma cópia reduzida da imagem para a aba, então seguir qualquer um dos links e voltar não faz você perdê-la.

O que acontece com os pixels

Agrupamento k-means é o método por baixo. Ele separa os pixels amostrados num número fixo de grupos atribuindo cada pixel ao centro mais próximo, movendo cada centro para a média dos seus pixels e repetindo até nada mais se mover. Cada amostra que você vê é um desses centros. O processo, lido no código-fonte da ferramenta:

• A imagem é reduzida para que o lado maior tenha no máximo 320 pixels antes de qualquer leitura. Uma foto menor do que isso fica como está.
• No máximo 6 000 pixels são amostrados, em intervalos regulares. Uma foto de 4 000 × 3 000 vira 320 × 240 = 76 800 pixels, então um a cada 13 é lido (76 800 ÷ 6 000 = 12.8, arredondado para cima), o que dá 5 908.
• Pixels com valor alfa abaixo de 128 de 255 são ignorados, para que um logo sobre fundo transparente não volte como preto.
• O agrupamento roda em OKLab, um espaço de cor construído para que a distância numérica entre duas cores acompanhe o quanto elas parecem diferentes. Em sRGB, as distâncias entre cores escuras são exageradas e as distâncias entre cores claras, subestimadas, e é assim que um extrator em sRGB devolve vários escuros quase idênticos de uma foto que claramente tem escuros bem diferentes.
• Ele roda por até 24 rodadas, e os centros iniciais não envolvem nenhum acaso: o primeiro é o pixel no meio da amostra, e cada um dos seguintes é o pixel mais distante dos centros já escolhidos. A mesma foto dá a mesma paleta todas as vezes.

Dominant, Distinct e Accessible, comparados

Os três modos respondem a perguntas diferentes, e a porcentagem ao lado de cada amostra significa algo um pouco diferente em cada um.

Modo	Grupos calculados	O que você obtém	A porcentagem
Dominant	O número que você definiu	Todos os grupos, do maior para o menor	Participação dos pixels amostrados naquele grupo
Distinct	O dobro do número mais dois, no máximo 16	Grupos tomados do maior para o menor, pulando qualquer um a menos de 0.1 de luminosidade e 0.05 de croma de um já mantido, depois cortados para o número que você definiu	Participação dentro do agrupamento maior, então a coluna não precisa somar 100
Accessible	O número que você definiu	Os grupos do Dominant, com cada um abaixo de 4.5:1 sobre branco movido para a luminosidade mais próxima que passa	Igual ao Dominant

O teste de duplicatas do Distinct olha só para luminosidade e croma, não para o matiz, então dois destaques de matizes diferentes com luminosidade e croma parecidos contam como um só. Quando os destaques de uma foto diferem principalmente no matiz, o Dominant com uma contagem maior pode ser a melhor forma de fazê-los aparecer.

O Accessible procura a luminosidade em passos de 0.01 e fica com o valor aprovado mais próximo do original, mantendo o matiz e, onde a tela consegue exibi-lo, o croma.

Por que cores de foto falham como texto sobre branco

Três coisas se somam contra uma fotografia.

Os centros são médias. Uma amostra é a média de todos os pixels do grupo dela, então a amostra mais escura é mais clara do que os pixels mais escuros dentro dela: a sombra é misturada com a quase sombra. Os extremos de que uma cor de texto precisa são a primeira coisa que a média elimina.

Texto de corpo sobre branco precisa de uma cor escura, e a maior parte de uma fotografia é tom médio. Para 4.5:1 sobre branco, a fórmula do WCAG limita a luminância relativa a 1.05 ÷ 4.5 − 0.05, cerca de 0.183. Numa cor neutra, a luminosidade OKLCH é a raiz cúbica da luminância relativa, então isso dá uma luminosidade de cerca de ∛0.183 ≈ 0.568. Os exemplos calculados nas notas das ferramentas de cor do site chegam ao mesmo lugar: um azul com luminosidade 0.567 mede 4.50:1, e um âmbar a 0.572 mede 4.51:1.

O valor em cada amostra é medido só contra o branco. O âmbar de um pôr do sol, #e8b04b, mede 1.95:1 sobre branco com luminosidade 0.791. O Accessible devolve #a16c00 com 4.51:1, mantendo o matiz 79° e baixando a luminosidade para 0.572, uma queda de 0.791 − 0.572 = 0.219. É um âmbar visivelmente mais escuro que continua pertencendo à fotografia.

Uma página escura inverte o problema. A razão de uma cor sobre preto é 21 dividido pela razão dela sobre branco, então o âmbar original chega a 21 ÷ 1.95, mais de 10:1, sobre preto. A versão do Accessible chega a 21 ÷ 4.51, pouco abaixo de 4.7:1, mal passando do limite. Para texto sobre fundo escuro, fique no Dominant e calcule o valor de cada amostra sobre preto dessa forma.

Comparado com um extrator típico

	Esta ferramenta	Um extrator online típico
Espaço de agrupamento	OKLab	sRGB
Modos	Dominant, Distinct ou Accessible, com nome	Um, sem nome
Verificação de uso	Contraste sobre branco para cada amostra	Nenhuma
Uma amostra que reprova	Busca de luminosidade no mesmo matiz	Não oferecido
A imagem	Decodificada na aba	Enviada a um servidor

Outras formas de fazer isso

Não existe método nativo no macOS, no Windows ou no iPhone para extrair uma paleta de uma foto, nem um caminho por linha de comando entre os que estes guias garantem. Se você já tem cores vindas de outro lugar, o verificador de contraste diz quais podem carregar texto e encontra a versão mais próxima de cada uma que pode.

Como verificar que a foto não sai daqui

A área de soltar diz que o arquivo é lido no seu navegador, e você pode confirmar. Abra o DevTools, escolha o painel Network e solte uma foto: nenhuma requisição levando a imagem sai. Desconectar da rede antes de soltá-la também funciona, e a paleta aparece mesmo assim.

Abra o seletor de cores de imagem com a foto que você tem em mente e leia a linha abaixo das amostras antes de se apaixonar por elas. Se a cor que você quer reprova sobre branco, Como corrigir o contraste sem mudar a cor da marca explica por que mexer na luminosidade, e não no matiz, a mantém reconhecível.