Como criar uma paleta de cores de marca que funciona na prática

1. Comece pelas aplicações, não pela quantidade de cores

Uma fileira de cinco cores atraentes deixa várias decisões em aberto. Qual delas será usada em um parágrafo? Qual será o fundo? O cliente pode usar a cor de destaque em um botão de reserva ou em um rótulo de gráfico? Comece listando as primeiras peças que a identidade precisa atender: um cardápio, um site simples, embalagens e uma apresentação, por exemplo.

Neste exercício fictício, Field Table é uma cafeteria de bairro. Sua paleta contém Forest #24352B, Oat #F7F3E8 e Harvest #D7A84B. Esses exemplos inventados demonstram um método de especificação. Não são uma identidade pronta nem uma receita universal.

Reúna alguns textos reais antes de escolher os tons de apoio. Um aviso longo sobre o horário de funcionamento e um preço são testes melhores do que uma palavra decorativa em uma prancheta vazia.

2. Dê funções específicas às cores

Anote as funções ao lado dos valores. Forest é a cor padrão do texto, Oat é uma superfície clara e Harvest é uma superfície de destaque. Essas descrições são mais úteis do que “cor 1”, “cor 2” e “cor 3”. Uma função pode ter valores diferentes em contextos diferentes, mas cada variação deve ser intencional e documentada.

O USWDS oferece um exemplo público de cores de tema organizadas por função. Aproveite a ideia de nomear a finalidade, não a paleta específica desse sistema governamental. Para Field Table, uma breve ficha de funções é suficiente; não há motivo para impor um número fixo de cores ou uma divisão percentual universal.

Mantenha as cores de destaque da identidade separadas das cores semânticas de erro, aviso e sucesso. Uma cor quente de destaque da marca não é automaticamente um aviso, e uma cor verde da marca não deve ser o único sinal de sucesso. Nomeie e documente essas funções separadamente quando o cliente precisar de uma interface.

Leitura complementar: USWDS: tokens de cores de tema · USWDS: tokens de cores de estado

3. Teste primeiro plano e fundo juntos

O contraste diz respeito a uma combinação de cores em uso. Na matriz abaixo, todas as cores são valores sRGB opacos sobre fundos uniformes. As razões foram calculadas a partir da luminância relativa; os números exibidos são arredondados para facilitar a leitura, mas a aprovação ou reprovação usa o valor sem arredondamento.

Para o contraste de texto no nível AA das WCAG, o mínimo é 4,5:1 para texto comum e 3:1 para texto grande. Grande significa pelo menos 18 pt (24 px CSS), ou 14 pt em negrito (cerca de 18,7 px CSS), no tamanho renderizado. Verifique o texto na aplicação real, não apenas a configuração em pontos no arquivo de design. Não arredonde um resultado ligeiramente abaixo do mínimo para considerá-lo aprovado. Essas verificações abrangem apenas o contraste do texto.

Leitura complementar: W3C: contraste de texto

4. Separe o logotipo das cores de apoio

A exceção para logotipos não se aplica aos textos comuns da marca. Mantenha a arte aprovada do logotipo e suas regras de aplicação separadas das regras para textos, botões e navegação.

No nosso exemplo, o texto branco sobre Harvest é difícil de distinguir. O texto em Forest sobre a mesma superfície Harvest oferece uma combinação de maior contraste. Isso corrige a peça de apoio sem alterar silenciosamente o logotipo aprovado.

Se um tom de apoio precisar ficar mais escuro, atribua uma função própria ao novo valor e mostre onde seu uso é permitido. Não substitua todas as ocorrências de uma cor original da marca sem revisar a arte e combinar o escopo da alteração.

5. Monte uma pequena amostra com conteúdo real

Diagrame uma seção do cardápio, um cartão com o horário de funcionamento e um botão de reserva. Use as mesmas funções nos três. Depois, experimente um título mais longo e uma largura estreita de tela de celular. Verifique o tamanho e o peso reais da fonte, não apenas o resultado de uma calculadora.

Quando a cor comunicar estados ou categorias, acrescente outro sinal visível, como um rótulo ou uma forma. A legenda de um gráfico deve identificar cada série com clareza. Não faça o cliente interpretar “verde significa disponível” apenas pela cor.

Trate modo escuro, fotografias, transparências e gradientes como casos separados. Uma combinação testada em uma superfície clara uniforme não diz nada sobre texto em uma imagem em movimento ou em outro fundo.

Leitura complementar: W3C: não dependa apenas da cor

6. Entregue decisões, não apenas valores

Inclua o nome da cor, a função, o valor digital exato, a combinação permitida de primeiro plano e fundo e um exemplo realista. Identifique as combinações que não devem ser usadas em texto comum. Mantenha as especificações de produção gráfica separadas e defina-as em acordo com o cliente, considerando o suporte, o processo e o fornecedor que serão usados.

A ficha abaixo oferece a quem trabalhar no design no futuro um lugar para registrar uma alteração e seu motivo. Entregue-a junto com os arquivos aprovados do logotipo e as demais orientações da identidade. Não descreva uma marca inteira como “acessível” só porque várias combinações de texto foram aprovadas.

Versão e responsável: …
Aplicação: …
Função e valor da cor: …
Primeiro plano / fundo: …
Tamanho e peso da fonte: …
Contraste sem arredondamento e resultado: …
Uso permitido e exemplo: …
Restrições e verificações posteriores: …

Continue com: Documente as especificações RGB e CMYK para a entrega

Perguntas frequentes