Como as cores são escolhidas
A ferramenta cria uma cópia reduzida da sua imagem, com no máximo 160 pixels no lado mais comprido, e conta cada pixel que não é transparente. Em seguida, agrupa pixels semelhantes com agrupamento k-means e informa a cor média de cada grupo, do maior para o menor. A porcentagem em cada amostra indica quanto da imagem aquele grupo cobre.
O ponto de partida é fixo em vez de aleatório: começa pela cor mais comum e depois continua adicionando a cor mais distante das que já tem. Assim, a mesma imagem gera a mesma paleta todas as vezes, e um pequeno detalhe vivo, como um logotipo vermelho sobre uma caixa branca, ganha a sua própria amostra em vez de se diluir no fundo.
Peça de 5 a 8 cores. Uma foto de produto sobre fundo liso costuma precisar de 5 ou 6. Uma foto de estilo de vida movimentada fica melhor com 8. Se a imagem tiver menos cores distintas do que você pediu, a ferramenta avisa e mostra as que encontrou.
Como ler a matriz de contraste
Cada cor é combinada com todas as outras, mais branco e preto puros, e cada célula mostra a razão de contraste para texto na cor da linha sobre um fundo na cor da coluna. A razão segue a definição da WCAG: (L1 + 0,05) / (L2 + 0,05), onde L1 e L2 são a luminância relativa da cor mais clara e da mais escura. Varia de 1:1 (a mesma cor duas vezes) a 21:1 (preto sobre branco).
Os rótulos são os limites definidos pela WCAG:
- AA: pelo menos 4,5:1 para texto normal e 3:1 para texto grande (Critério de Sucesso 1.4.3).
- AAA: pelo menos 7:1 para texto normal e 4,5:1 para texto grande (Critério de Sucesso 1.4.6).
- Texto grande significa pelo menos 18 pontos, ou 14 pontos em negrito (definição de escala grande da WCAG).
Uma célula marcada como AA grande serve para um título grande e é fraca demais para uma legenda. A explicação do 1.4.3 do W3C também diz que a razão não deve ser arredondada, portanto 4,499:1 não atinge 4,5:1. A ferramenta avalia o número exato e o exibe cortado em duas casas decimais, nunca arredondado para cima.
Um exemplo resolvido
Digamos que a foto dê a você um azul-marinho de #1a3c6e e um creme de #fdf6e3. A luminância relativa do azul-marinho fica em torno de 0,046 e a do creme em torno de 0,923. A razão é (0,923 + 0,05) / (0,046 + 0,05), ou cerca de 10,1:1 com esses valores arredondados e 10,16:1 com os exatos. Isso passa no AAA para todo tipo de texto, então texto azul-marinho sobre um cartão final creme é seguro em qualquer tamanho. Coloque um laranja médio como #e07a2e sobre o mesmo creme e a razão cai para 2,78:1, o que falha até para texto grande. Reserve o laranja para um botão com texto preto (6,99:1, que é AA mas fica um pouco abaixo do AAA), ou para uma forma sem palavras.
Como usar a exportação
A exportação em CSS é um bloco :root de propriedades personalizadas, --color-1 para a cor que cobre a maior parte da imagem e assim por diante. O JSON traz o hex, RGB, HSL de cada cor e a sua participação na imagem, fácil de colar em um arquivo de tokens de design ou entregar a um script. Renomeie as variáveis assim que souber qual cor é o fundo, qual é o texto e qual é o destaque.
O que esta ferramenta não faz
Ela não sabe quais cores são as da sua marca. Uma foto do seu produto sobre uma mesa de madeira vai incluir a mesa. Recorte primeiro para o produto ou a embalagem se quiser apenas as cores dele. Ela também não informa as cores exatas de impressão: os números são os pixels do arquivo, depois da sua câmera e de qualquer edição, então confira-os em relação ao seu guia de marca antes de publicá-los. E ela avalia apenas o contraste de texto. A WCAG tem regras separadas para ícones e elementos de interface, que esta matriz não avalia.
Se você preferir não fazer isso à mão
O Hermoso é marketing em piloto automático: ele pesquisa os anúncios que já funcionam no seu mercado, cria anúncios em imagem e vídeo alinhados à sua marca, agenda as publicações e roda campanhas pagas nas suas próprias contas de anúncio. Quando você adiciona a sua marca a partir do seu site, ele aprende os seus produtos, logotipo e paleta, e você pode definir as cores de legendas e cartões finais com códigos hex. Funciona no aplicativo web ou dentro do Claude, do ChatGPT e do Cursor por meio do seu servidor MCP.
Ferramentas gratuitas: Guia de tamanhos para redes sociais · Criador de grade do Instagram · Gerador de Open Graph
Perguntas frequentes
Como obter uma paleta de cores a partir de uma foto?
Solte a foto na ferramenta e escolha quantas cores você quer, de 5 a 8. Ela agrupa pixels semelhantes e mostra a cor média de cada grupo em HEX, RGB e HSL, do maior para o menor, com um botão de copiar em cada uma.
De qual proporção de contraste preciso para texto?
O WCAG 2.2 nível AA pede pelo menos 4.5:1 para texto normal e 3:1 para texto grande. O nível AAA pede 7:1 e 4.5:1. Texto grande tem pelo menos 18 pontos, ou 14 pontos em negrito.
4.49:1 é próximo o suficiente para passar no AA?
Não. A W3C afirma que a proporção calculada não deve ser arredondada ao ser comparada com um limite, então 4.499:1 não atende a 4.5:1. A ferramenta avalia o número exato.
Por que obtenho a mesma paleta sempre?
O agrupamento começa a partir de um ponto fixo, a cor mais comum, e então adiciona a cor mais distante das já escolhidas. Não há início aleatório, então uma imagem sempre dá uma resposta.
Minha imagem é enviada?
Não. Ela é lida pelo leitor de arquivos do próprio navegador e contada em um canvas no seu dispositivo. Nada é enviado para lugar algum nem armazenado.
O Hermoso cria os anúncios, agenda as publicações e gerencia as campanhas. Comece grátis, mais de 250 créditos gratuitos que você pode ganhar, sem cartão.
Começar grátis → Ver preços