Como Escolher um Esquema de Cores para o Seu Website

A maior parte dos conselhos sobre "esquema de cores para website" desfaz-se no momento em que se abre um verdadeiro ficheiro de design. Escolhe-se três amostras bonitas num gerador, deixam-se cair num layout e, dentro de uma hora, já se está a improvisar uma quarta cor para a mensagem de erro, uma quinta para o texto de legenda esbatido e uma sexta porque o azul de marca original é ilegível sobre branco. O problema não é o seu gosto. É que um website não precisa de uma paleta de cores bonitas — precisa de um sistema pequeno e em camadas, em que cada cor tem uma função.

Já lancei interfaces suficientes para conhecer o fosso entre "adoro estas cores" e "este site é utilizável". Este guia é o método que efetivamente uso para ir de um ao outro, e como o montar a partir de uma paleta que se gera em vez de adivinhar às escuras.

Quantas cores um website precisa mesmo

Muito menos do que as pessoas pensam, e muito mais do que três.

A confusão vem de misturar tonalidades com cores usadas na interface. Um site limpo pode ser construído a partir de apenas duas ou três tonalidades — digamos um azul de marca e um cinzento quente — mas estas expandem-se para mais de quinze valores efetivos quando se contabilizam fundos, contornos, texto em diferentes níveis de ênfase, estados de hover e por aí fora. Por isso a resposta honesta é: aponte para uma ou duas tonalidades reais mais um conjunto disciplinado de neutros, e depois derive tudo o resto.

Se der por si a procurar uma tonalidade genuinamente nova e sem relação, pare. Nove em cada dez vezes não precisa de outra cor — precisa de uma versão mais clara ou mais escura de uma que já tem. Esse simples hábito evita o aspeto turvo e de tenda de circo que grita amadorismo.

O conjunto em camadas: atribua uma função a cada cor

Pense em camadas, não numa fila plana de amostras. Esta é a estrutura que construo sempre, de cima para baixo.

1. A cor primária / de marca

�esta é a cor que um visitante nomearia se lhe perguntasse o que o seu site "é". Carrega a personalidade e deve aparecer nas coisas que mais quer destacar — o logótipo, os botões primários, a navegação ativa. Escolha-a primeiro, porque tudo o resto reage a ela.

Um aviso da experiência: uma cor de marca saturada quase nunca é legível como texto de corpo nem utilizável como fundo grande. O roxo da Stripe, o verde da Spotify, o quase-preto do GitHub — na prática estas marcas usam a sua tonalidade-assinatura com parcimónia e apoiam-se em neutros para os restantes 90% da superfície. A sua cor de marca é um tempero, não a refeição. Se está a escolher a tonalidade do zero, as associações emocionais importam, e A Psicologia da Cor no Branding é um lugar melhor para raciocinar sobre qual tonalidade do que qualquer pré-visualização de gerador.

2. Uma escala de neutros / fundos

Este é o herói não reconhecido de todo o site com aspeto profissional, e a camada que os principiantes saltam. Quer uma escala de neutros — não um cinzento, mas um gradiente de cinco a oito degraus, do quase-branco ao quase-preto. Algo como #FFFFFF, #F7F8FA, #EBEDF0, #D2D6DC, #9AA0A8, #4B5159, #23272E.

O cinzento puro (R, G, B iguais) serve, mas um neutro com matiz parece mais intencional — desvie a tonalidade alguns graus na direção da sua cor de marca e baixe a saturação para cerca de 5–10%. Um cinzento puxado para o azul sob uma marca azul lê-se como "desenhado"; um cinzento neutro morto lê-se como "Bootstrap por defeito". Use estes degraus para fundos de página, superfícies de cartões, separadores e estados desativados. Vale a pena perceber bem a mecânica de gerar uma escala consistente — veja Tints, Shades e Tones Explicados.

3. Cores de texto legíveis (e a regra de contraste que as governa)

O texto de corpo raramente é preto puro sobre branco puro — #000000 sobre #FFFFFF pode parecer agressivo e causar um efeito vibrante e fatigante para alguns leitores. Costumo definir o texto principal em torno de #1A1D21 e defino mais dois níveis: texto secundário perto de #5A6068 para legendas e metadados, e um cinzento desativado/placeholder perto de #9AA0A8.

Mas a verdadeira restrição aqui não é estética, é mensurável. Segundo as diretrizes WCAG do W3C, o texto de corpo de tamanho normal precisa de um rácio de contraste de pelo menos 4.5:1 face ao fundo para cumprir o Nível AA; o texto grande (cerca de 24px, ou 18.66px a negrito) precisa apenas de 3:1. Aquele cinzento secundário de que gostou? Verifique-o. A falha de acessibilidade mais comum que vejo é texto 'subtil' cinzento-claro sobre branco que fica perto de 2.8:1 — bonito na maquete, ilegível à luz do sol. Passe cada par de texto sobre fundo pelo verificador de contraste WCAG do gerador de paletas de cores antes de avançar. Se quiser perceber o que o rácio realmente mede e porque é que 4.5:1 é a linha, Rácios de Contraste WCAG Explicados aprofunda o assunto.

4. Uma cor de destaque / CTA

Eis uma jogada contraintuitiva: a sua cor de call-to-action não é, muitas vezes, a sua cor de marca. Se a sua marca é azul e os seus botões primários também são azuis, o botão "Comprar agora" compete com cada link e cabeçalho pela atenção. Um destaque distinto — frequentemente uma tonalidade complementar ou complementar dividida — faz com que a única ação que lhe interessa salte da página.

Gere-a deliberadamente. Coloque a tonalidade da sua marca na roda, mude para uma harmonia complementar ou complementar dividida, e obterá uma candidata suficientemente tensa para atrair o olhar sem chocar. Um azul de marca (#2563EB) combina de forma limpa com um destaque âmbar quente ou coral (#F59E0B / #F97316) para o CTA principal. Reserve esta cor quase inteiramente para os momentos de conversão — assim que a usar como decoração, deixa de significar "clique aqui".

5. Cores de estado semânticas

Toda a interface real acaba por precisar de dizer sucesso, aviso, erro e informação. A maioria das pessoas pega nas predefinições óbvias — verde, amarelo, vermelho, azul — e fica por aí, o que causa dois problemas.

Primeiro, o vermelho e o verde de manual chocam com cores de marca cuidadosamente escolhidas e parecem uma linguagem de design separada e mais ruidosa, acrescentada à força. A solução é puxar essas tonalidades para a saturação e a temperatura globais da sua paleta, para que pareçam família. Aponte para algo como sucesso #16A34A, aviso #D97706, erro #DC2626, informação #2563EB, e depois ajuste a saturação para combinar com as suas outras cores.

Segundo — e isto importa mais — nunca dependa só da cor para comunicar um estado. Cerca de 1 em cada 12 homens e 1 em cada 200 mulheres têm alguma forma de deficiência da visão das cores, e vermelho/verde é a confusão clássica. Associe sempre a cor de estado a um ícone, uma etiqueta ou uma forma. Um contorno vermelho e uma mensagem "✕ Campo obrigatório". Um visto verde e a palavra "Guardado". Isto é uma exigência das WCAG, não um luxo, e é o hábito de acessibilidade com maior alavancagem que pode construir. Se o seu público ou produto é sensível à cor, Paletas Amigas do Daltonismo explica como testar isto diretamente.

6. Cores de link, hover e foco

A camada mais pequena, e a que separa os sites polidos dos desleixados.

• Links costumam assumir a cor de marca, mas verifique o contraste face à superfície sobre a qual assentam — uma cor de marca afinada para botões é muitas vezes demasiado clara para links de texto inline.
• Hover deve ser uma tonalidade derivada, não uma cor nova: pegue na base e desça a luminosidade em 8–12% em HSL. Consistente, previsível, grátis.
• Anéis de foco são inegociáveis para utilizadores de teclado. As WCAG 2.1 exigem também que os componentes de interface e os seus estados atinjam um rácio de contraste não-textual de 3:1, por isso um contorno de foco ténue que "parece limpo" mas mal se vê é uma falha. Torne-o óbvio.

Montá-lo a partir de uma paleta gerada

Eis o fluxo de trabalho que transforma o resultado de um gerador no sistema acima, em vez de cinco amostras que depois tem de salvar.

Comece por fixar a tonalidade da sua marca na roda. Use uma regra de harmonia para propor, não para ditar — análoga se quiser uma sensação calma e coesa; complementar ou complementar dividida se precisar de um destaque com garra. (Se está indeciso entre esquemas, Complementar Dividida vs Paletas Tríades detalha os compromissos.) Copie o hex de marca e o hex de destaque; essas são as camadas 1 e 4.

Depois construa os neutros deliberadamente. Pegue na tonalidade da sua marca, baixe a saturação para cerca de 8% e use a leitura HSL para escalonar a luminosidade de ~98% até ~14% em cinco ou seis paragens. É essa toda a sua escala de neutros — camada 2 — e, por partilhar a tonalidade da marca, vai parecer unificada em vez de enxertada. Derive as cores de texto do extremo escuro dessa escala (camada 3), e verifique cada uma face ao seu fundo com a ferramenta de contraste até que todos os pares ultrapassem 4.5:1.

Para os estados semânticos, gere verde/âmbar/vermelho/azul separadamente, e depois ajuste a sua saturação nos campos HSL para que se sentem ao lado da sua paleta em vez de gritarem por cima dela. Por fim, derive os valores de hover e foco deslocando a luminosidade em cores que já tem — sem precisar de tonalidades novas.

A razão para trabalhar em HSL de ponta a ponta é que torna "um pouco mais claro" ou "um toque menos saturado" uma alteração de um único número, em vez de um jogo de adivinhação em três canais RGB. Se essa representação for nova para si, Códigos de Cor Hex, RGB e HSL Explicados vale dez minutos.

Um passo que lhe poupa um redesenho

Antes de se apaixonar por qualquer esquema, cole os seus valores finais num wireframe cinzento e carregado de texto — títulos reais, parágrafos reais, botões reais — e olhe para ele durante um minuto inteiro. A cor seduz sempre numa grelha de amostras e desilude num layout, porque o contexto, os neutros circundantes e a proporção mudam tudo. A regra 60-30-10 dá-lhe proporções que vale a pena respeitar aqui: sobretudo neutro, uma quantidade significativa de marca, um pequeno toque de destaque.

Um esquema de cores para website não é um conjunto de cores de que gosta. É um conjunto de decisões — o que é marca, o que é superfície, o que é legível, o que é clique aqui, o que é "algo correu mal" — cada uma atribuída, testada e reutilizada com disciplina. Acerte nas funções e quase qualquer paleta de bom gosto vai funcionar. Salte as funções e até uma paleta bonita vai dar-lhe luta em cada ecrã.