Paleta de Cores

Uma cor não é uma paleta

Quase todo negócio pequeno escolhe uma cor e para por aí. Aí chega a hora de fazer o cartão, o cardápio, o post e o site, e falta cor para tudo: o fundo do bloco, a borda da caixa, o botão apertado, o texto secundário, o aviso de erro. Cada peça acaba nascendo com um tom inventado na hora, e o conjunto fica com cara de coisa remendada.

O que resolve isso é uma escala. A mesma cor em oito níveis de claro e escuro cobre fundo, borda, botão, botão pressionado e texto sem nenhuma cor nova entrar na história. É o motivo de marcas grandes parecerem organizadas: não é bom gosto, é uma tabela.

As harmonias vêm depois, e servem para o acento: aquela cor que aparece pouco, no botão principal e no selo de promoção, e que justamente por aparecer pouco chama atenção quando aparece.

Contraste é o número que decide

Essa é a parte que os geradores de paleta bonitos costumam ignorar. Contraste é a razão entre a luminosidade da cor de fundo e a do texto em cima dela, e ele tem números de referência, os da WCAG, que é a norma de acessibilidade da web:

4,5:1 é o mínimo para texto de tamanho normal. 3:1 serve para texto grande, a partir de mais ou menos 24 pixels, e para a borda de um botão ou de um campo. Abaixo de 3:1, a cor não serve para carregar informação nenhuma: ela é decoração.

Isso não é preciosismo de designer. O celular no sol, a tela com brilho baixo para economizar bateria, a impressão em preto e branco e o cliente de 55 anos são a realidade de quem vê a sua marca. Amarelo com texto branco tem contraste perto de 1,5:1 e simplesmente some.

Tem um detalhe bonito da matemática aqui que resolve metade das dúvidas: o contraste de uma cor contra o branco e contra o preto sempre multiplica 21. Consequência prática: toda cor do mundo passa em 4,5:1 com um dos dois. Ou seja, a pergunta nunca é “essa cor serve de fundo de botão”, porque serve; a pergunta é “com texto branco ou preto por cima”, e usar o errado é o que quebra.

Onde a coisa falha de verdade é no outro uso: a cor de marca como texto em cima do branco. Aí não tem escapatória, e é o erro mais comum com cor viva. Um amarelo de marca dá pouco mais de 1:1 contra o branco, o que significa texto invisível. Por isso a ferramenta mostra as duas leituras separadas e, quando a cor não serve para escrever, diz qual tom da escala usar no lugar.

A regra dos 60, 30 e 10

Com a paleta na mão, a pergunta vira quanto usar de cada uma. A régua mais simples que existe funciona bem para negócio pequeno.

60% neutro. Branco, quase branco ou cinza bem claro. É o fundo de quase tudo.

30% da cor da marca. Cabeçalho, títulos, faixas, ícones. É o que faz a peça parecer sua.

10% de acento. Só o que precisa ser clicado ou notado: botão de comprar, selo de oferta, aviso.

O erro clássico é inverter, encher a página da cor da marca e deixar o botão da mesma cor do resto. Quando tudo grita, nada é ouvido, e o cliente não acha onde clicar.

De onde vem a cor da sua marca

Se você ainda não tem uma, três caminhos que costumam dar certo em negócio pequeno.

Do que você já usa. Fachada, uniforme, embalagem, a foto que mais funcionou no Instagram. Puxar a cor do que já existe evita o retrabalho de trocar tudo depois.

Do que o seu ramo espera, com um desvio. Verde em saúde e natural, azul em confiança e serviço, vermelho e amarelo em comida rápida, tons terrosos em artesanal. Seguir o esperado ajuda a ser entendido rápido; desviar um pouco ajuda a ser lembrado. Copiar exatamente o tom do concorrente forte da esquina é o pior dos mundos.

Do contraste que você precisa. Se o seu negócio vive de foto de produto, uma cor de marca discreta deixa a foto brilhar. Se você vende serviço e quase não tem imagem, a cor precisa ser o rosto da coisa.

HEX, RGB e CMYK, em uma linha cada

HEX é o código de seis caracteres, tipo #1D6BE5, e é o formato de tela: site, post, apresentação. É o que a ferramenta entrega.

RGB é a mesma coisa escrita em três números de 0 a 255. Alguns programas pedem assim.

CMYK é de gráfica, e é onde mora a decepção: a impressão trabalha com tinta e não com luz, então cor muito viva de tela, principalmente azul elétrico e verde neon, sai mais apagada no papel. Antes de mandar imprimir mil folhetos, peça uma prova impressa. Sai barato e evita a surpresa.

Combina com

Com a paleta pronta, o gerador de etiqueta de preço e o gerador de orçamento resolvem duas peças que o cliente vê de perto. E se a marca ainda não tem nome, o gerador de nome de empresa vem antes da cor, com a checagem de INPI e domínio junto.