O que compõe uma paleta de cores de marca?

Uma paleta de marca atribui uma função a cada cor. A cor primária é aquela que as pessoas lembram, presente no logotipo e nos botões principais. Uma cor secundária complementa a primária, uma cor de destaque chama a atenção para as chamadas à ação, e as cores de fundo e do texto dão unidade à página.

O contraste é tão importante quanto a estética. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) recomendam uma proporção mínima de 4.5:1 entre o texto normal e o fundo, ou de 7:1 para o nível AAA, mais rigoroso.

Descrição da ferramenta

Descreva sua marca em Sobre sua marca: o que ela faz, para quem é e que impressão deve transmitir. Escolha uma personalidade da marca (Profissional, Descontraída, Luxuosa, Minimalista, Ousada ou Natural) ou mantenha a opção Corresponder à descrição para que a IA a deduza do seu texto.

Você recebe cinco cores com nomes: Primária, Secundária, Destaque, Fundo e Texto. O formato de saída alterna os valores entre HEX, RGB, HSL, CMYK e outros formatos, e cada cor tem um botão de cópia. O Guia de uso explica como usar cada cor, e as variáveis CSS são fornecidas em um bloco para colar em uma folha de estilos. A IA é instruída a manter uma proporção de contraste de pelo menos 7:1 entre o texto e o fundo, e de pelo menos 3:1 para as cores primária e de destaque.

Exemplo

Para “Uma torrefação de café de bairro em Portland. Acolhedora, convidativa e sustentável”, você pode receber uma cor primária marrom-torrado, um fundo creme e um destaque terracota, com variáveis CSS como estas:

:root {
  --brand-primary: #5b3a29;
  --brand-secondary: #a47551;
  --brand-accent: #d9643a;
  --brand-background: #faf6f0;
  --brand-text: #2b211c;
}

Recursos

  • Cinco cores com funções bem definidas, um nome e uma observação de uso para cada uma
  • Seis personalidades ou uma escolhida com base na sua descrição
  • Copie as cores no formato de que precisa ou o conjunto completo como variáveis CSS

Limitações

A ferramenta não mede o contraste, então verifique a combinação de texto e fundo com um verificador de contraste antes de publicar.