Monte uma paleta de cores da marca com as suas próprias fotos de produto

Muitas marcas pequenas têm um arquivo de logo e nenhuma lista de cores. As cores estão no próprio produto: o frasco, o rótulo, a caixa, o tecido. Na hora de criar um anúncio, uma miniatura ou um estilo de legenda, alguém olha um código hex de uma foto e torce para acertar.

Dá para fazer melhor em cerca de dez minutos. Extraia as cores de fotos do produto real, dê a cada uma uma função e verifique quais pares são legíveis como texto. Nosso extrator de paleta de cores gratuito faz a extração e a verificação no seu navegador, sem enviar nada.

Por que começar pelo produto, e não por um mood board

As pessoas reconhecem seu produto pelo jeito que ele aparece na prateleira ou na mão. Um anúncio cujas cores combinam com a embalagem parece, de relance, a mesma marca, e um que foge do padrão parece imitação. Uma paleta tirada do produto também é honesta sobre o que você de fato vende, coisa que um mood board raramente é.

Serve para serviços também. Se você não tem produto físico, use suas melhores capturas de tela, sua fachada ou fotos da equipe, o que as pessoas já associam a você.

Passo 1: escolha e recorte as fotos

Escolha duas ou três fotos limpas: o produto sobre fundo liso, a embalagem de frente, e uma foto de estilo de vida de que você goste. Depois recorte com precisão. O extrator conta cada pixel que você fornece, então um frasco sobre uma mesa de madeira devolve a mesa como uma das cores da sua marca. Recorte até o produto e o rótulo, e a paleta será o produto.

Fotografe à luz do dia, ou pelo menos com luz clara, se puder. Uma lâmpada quente deixa a embalagem branca com tom creme, e todas as cores que você extrair vão carregar esse tom.

Passo 2: extraia de cinco a oito cores

Envie cada foto para o extrator e peça 5 ou 6 cores para uma foto de produto limpa, ou 8 para uma cena movimentada. Ele agrupa pixels parecidos e lista a média de cada grupo, da maior para a menor, com a fatia da imagem que cada um cobre. O ponto de partida é fixo, então a mesma foto sempre gera a mesma paleta, e um pequeno acento vivo, como uma tampa vermelha em um frasco branco, ganha a própria amostra em vez de ser diluído na média.

Rode todas as suas fotos e procure as cores que se repetem. Essas são a marca. Uma cor que aparece em só uma foto costuma ser do fundo ou da luz.

Passo 3: dê a cada cor uma função

Uma paleta só é útil quando cada cor tem um papel. A maioria das marcas precisa de quatro:

Fundo: a cor sobre a qual a maior parte do layout se apoia. Muitas vezes é a cor base da embalagem, ou um neutro claro.
Texto: uma cor escura que seja legível sobre o fundo. Um quase preto funciona. Uma cor de marca profunda funciona melhor, se passar na verificação de contraste.
Destaque: a cor chamativa, para um botão, um adesivo de preço ou uma única palavra em destaque.
Apoio: um ou dois neutros para caixas, divisores e textos secundários.

Resista à vontade de usar tudo o que a foto deu. Cinco cores nomeadas, com funções claras, mantêm cem anúncios consistentes. Doze não mantêm.

Passo 4: confira o contraste antes de usar em qualquer coisa

Pares de cores que ficam bons em um monitor grande podem ser difíceis de ler num celular sob o sol, e muito mais para pessoas com baixa visão. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) do W3C dão um número para isso, a razão de contraste, que vai de 1:1 (a mesma cor duas vezes) até 21:1 (preto no branco). Os limites são:

	Texto normal	Texto grande
AA (SC 1.4.3)	4.5:1	3:1
AAA (SC 1.4.6)	7:1	4.5:1

Texto grande significa pelo menos 18 pontos, ou 14 pontos em negrito, pela definição da WCAG. E os números são limites rígidos: a orientação do W3C sobre o critério 1.4.3 diz que a razão calculada não deve ser arredondada, então 4.499:1 não atinge 4.5:1.

A WCAG foi escrita para conteúdo web, não para anúncios, mas o raciocínio vale para qualquer texto em tela, incluindo legendas gravadas em um vídeo e as palavras de um end card.

Um exemplo prático

Digamos que sua embalagem tenha um azul-marinho #1a3c6e, um creme #fdf6e3 e um laranja #e07a2e.

A fórmula é (L1 + 0.05) / (L2 + 0.05), onde L1 é a luminância relativa da cor mais clara e L2 da mais escura. A luminância relativa vai de 0 para o preto a 1 para o branco. O azul-marinho dá cerca de 0.046, o creme cerca de 0.923 e o laranja cerca de 0.300.

Texto azul-marinho sobre creme: (0.923 + 0.05) / (0.046 + 0.05) = 0.973 / 0.096, cerca de 10.1 com esses números arredondados, e 10.16:1 exato. Passa no AAA em qualquer tamanho. Este é o seu par principal.
Texto laranja sobre creme: (0.923 + 0.05) / (0.300 + 0.05) = 0.973 / 0.350, cerca de 2.78:1. Reprova até para texto grande. O laranja não deve carregar palavras sobre o creme.
Texto preto sobre laranja: (0.300 + 0.05) / (0 + 0.05) = 0.350 / 0.05, que dá 7.0 com esses números arredondados, mas 6.99:1 exato. Passa no AA para todo texto, mas fica um pouco abaixo do AAA. Serve para o rótulo de um botão.
Texto creme sobre azul-marinho: é o mesmo par do primeiro, então dá os mesmos 10.16:1. Inverter um par nunca muda a razão.

Assim, os papéis quase se escolhem sozinhos: creme como fundo, azul-marinho no texto, laranja como forma de destaque com palavras pretas por cima (azul-marinho sobre laranja dá só 3.65:1, que é AA apenas para texto grande). O extrator mostra toda essa grade de uma vez, cada cor contra todas as outras, mais branco e preto, com cada célula classificada como AAA, AA, AA grande ou Falha.

Passo 5: anote tudo uma vez

Exporte a paleta como propriedades personalizadas de CSS ou JSON e guarde junto dos arquivos do seu logo. Renomeie as variáveis pela função depois de decidir: --brand-bg, --brand-text, --brand-accent se leem melhor do que --color-3 um mês depois. Acrescente uma linha abaixo de cada uma dizendo quais pares passaram, para que ninguém precise refazer a verificação.

Depois, confira os números com qualquer referência oficial que você já tenha. Uma foto dá a cor que a câmera viu, que é próxima da embalagem impressa, mas não idêntica à especificação de tinta. Se a sua gráfica ou o seu designer tiverem valores exatos, eles prevalecem.

Usando a paleta em anúncios e posts

Legendas e legendas de vídeo: a cor do texto sobre uma caixa na cor de fundo, ou o contrário. Confira o par antes.
End cards: a cor de fundo com o logo e uma linha na cor do texto. O destaque pode preencher o formato de um botão atrás de uma chamada curta para ação.
Miniaturas e capas: um destaque, uma palavra grande e legível, muito fundo.
QR codes na embalagem: uma cor da marca funciona se for claramente mais escura que a embalagem. Nosso gerador de QR code avisa quando o contraste está baixo.

Onde o Hermoso se encaixa

A Hermoso é um agente de marketing com IA. Pesquisa os anúncios que já funcionam no seu mercado, cria anúncios de imagem e vídeo alinhados à sua marca, publica e agenda posts nas suas próprias contas de redes sociais e roda campanhas pagas nas suas contas de anúncios. Ao adicionar sua marca pelo site, ela aprende seus produtos, seu logo e sua paleta. Legendas e end cards ficam desligados até você pedir, e quando pedir, você pode definir as cores do texto, da caixa e do end card com códigos hex, para que os pares que você verificou aqui sejam os que vão ao ar. Funciona no app web ou dentro do Claude, do ChatGPT e do Cursor, pelo seu servidor MCP.

Perguntas frequentes

Como encontro os códigos hex das cores do meu produto?

Recorte uma foto limpa só no produto ou na embalagem e envie para um extrator de paleta de cores. Ele lista as cores principais em HEX, RGB e HSL. Rode duas ou três fotos e guarde as cores que se repetem.

Qual razão de contraste o texto precisa?

Pela WCAG 2.2, o nível AA exige 4.5:1 para texto normal e 3:1 para texto grande, e o AAA exige 7:1 e 4.5:1. Texto grande tem pelo menos 18 pontos, ou 14 pontos em negrito.

4.49:1 é suficiente para o AA?

Não. O W3C diz que a razão não deve ser arredondada na comparação com o limite, então 4.499:1 não atinge 4.5:1.

Quantas cores uma paleta de marca deve ter?

O suficiente para dar a cada uma uma função: normalmente um fundo, uma cor de texto, um destaque e um ou dois neutros. Cinco cores nomeadas com papéis claros mantêm os anúncios mais consistentes do que uma lista longa.

As cores tiradas de uma foto são exatas?

Não. São o que a câmera registrou sob aquela luz, próximo do produto, mas não igual a uma especificação de impressão ou de tinta. Se você tem valores oficiais, use-os.