Paletas de cores vibrantes que continuam legíveis

Uma paleta de cores vibrantes continua legível quando você trata cada cor viva pela luminosidade, e não pela intensidade. Limão #FFD60A, verde vivo #34C759, água #00C2FF e tangerina #FF7A00 são todos claros o bastante para pedir texto quase preto. Rosa choque #FF2D87 e vermelho papoula #FF3B30 ficam num meio-termo incômodo: o texto preto passa, mas o branco só funciona em títulos grandes. Acrescente uma cor âncora calma, dê a cada cor vibrante o próprio espaço, e uma paleta que parece loja de doces vira uma paleta onde dá para escrever de verdade.

Quais cores vibrantes pedem texto preto

A saturação faz uma cor parecer forte, mas a legibilidade depende da luminosidade. Muitas cores vibrantes são bem mais claras do que parecem, e é por isso que texto branco sobre verde vivo ou amarelo parece gritante e mesmo assim é difícil de ler. A tabela abaixo mede onze cores vibrantes contra o branco e contra o quase preto #111111.

Uma regra prática útil: o lado claro do círculo cromático, do laranja passando por amarelo e verde até o ciano, pede preto, assim como os rosas e vermelhos mais quentes; o lado profundo, do azul passando pelo violeta até o carmim, pede branco. Se você cria para um público amplo, leia também paletas acessíveis para daltônicos, porque cores vibrantes que diferem só no matiz podem parecer iguais para alguns leitores.

Seis paletas de cores vibrantes com códigos hex

• Festa na piscina: água #00C2FF, verde vivo #34C759, limão #FFD60A, branco #FFFFFF, azul-marinho profundo #0B1F3A para o texto.
• Escola primária: cobalto #1D4ED8, vermelho sinal #C81D11, limão #FFD60A, papel #FAF7F0, tinta #111111.
• Risografia: rosa fluorescente #FF48B0, azul #0078BF, amarelo #FFE800, papel jornal #F2EFE6, preto #1A1A1A.
• Tropical: framboesa #E0115F, manga #FFA51F, palmeira #00A86B, areia #F6EBD9, cacau #2B1B14.

Como manter uma paleta vibrante legível

1. 1

   Escolha primeiro uma âncora

   Escolha um quase preto ou um branco quente e deixe que ele cubra a maior parte da superfície. Branco quente #FFF8EC com tinta #111111 mede 17,89:1, então toda palavra escrita em tinta fica legível.

2. 2

   Escreva na âncora, não numa cor vibrante

   O texto corrido fica na cor âncora. As cores vibrantes podem carregar um título ou um único número grande, onde vale o limite de 3:1 para texto grande.

3. 3

   Separe cores vibrantes de mesma luminosidade

   Rosa choque ao lado de um azul elétrico como #2F6BFF mede 1,28:1, e a borda parece tremeluzir. Coloque branco, preto ou espaço entre elas, ou combine uma cor vibrante clara com uma profunda.

4. 4

   Limite quantas cores vibrantes tocam as palavras

   Três cores vibrantes numa paleta já bastam, e só uma deve ficar atrás de cada bloco de texto. A regra 60 30 10 ajuda: âncora 60, cor vibrante principal 30, destaques 10.

5. 5

   Confira num celular ao ar livre

   Cores vibrantes desbotam no sol e em telas com pouco brilho. Se as palavras continuam legíveis num celular com o brilho baixo, a paleta funciona.

A versão da direita é o que o Gradiently faz por padrão. Um Mark sabe onde estão as suas palavras, afasta delas a cor mais agitada e escolhe texto claro ou escuro linha por linha, então você pode manter uma paleta intensa sem caixa nem sombra atrás do texto.

Degradês vibrantes sem um meio cinza

Misture duas cores vibrantes de lados opostos do círculo cromático em sRGB simples e o ponto do meio fica cinza ou marrom. Escolha cores vizinhas, ou peça ao navegador para interpolar em oklch, que mantém o meio saturado. Interpolação de degradês explica a diferença.

Para mais combinações, veja degradês vibrantes e degradês neon. Para orientação completa sobre contraste, leia contraste de cores.

Um aviso se a paleta for impressa: as cores de tela mais elétricas, principalmente água, rosa choque e verde vivo, ficam fora do que as tintas CMYK padrão conseguem reproduzir e voltam da gráfica visivelmente mais apagadas. Peça uma prova, ou planeje usar cores especiais ou tintas fluorescentes. RGB x CMYK explica o que esperar.