Cor em interfaces: como escolher cores que trabalham por ti
As três rodinhas de uma cor, a regra 60-30-10, neutros com personalidade, o que querem dizer o vermelho, o laranja e o verde, e o modo escuro. Explicado de forma simples, com exemplos dos meus projetos.
No post sobre contraste vimos como garantir que as cores se leem. Agora vem a pergunta que está antes dessa: como é que se escolhem as cores?
Numa app ou num site, a cor não está lá só para ficar bonita. Tem trabalho para fazer, como um sinaleiro: mostra para onde olhar, junta o que pertence ao mesmo grupo, diz o que se pode carregar e avisa quando algo correu bem ou mal.
Eu também começo muitas vezes «a olho», a experimentar até parecer bem. Mas depois organizo tudo num sistema, porque é isso que faz dezenas de ecrãs parecerem da mesma família. É esse sistema que explico aqui, com exemplos dos meus projetos.
As três rodinhas de uma cor: HSL
No computador, uma cor costuma escrever-se assim: #D4861A. Isto é ótimo para a máquina, mas a nós não diz nada. Por isso prefiro pensar em HSL, que é como ter três rodinhas para afinar uma cor:
- Matiz (H): qual é a cor. Imagina um arco-íris enrolado num círculo: o 0 é vermelho, o 120 é verde, o 240 é azul. É um ângulo, de 0 a 360.
- Saturação (S): quanta cor tem. A 0% é cinzento; a 100% é a cor mais viva possível.
- Luminosidade (L): se é clara ou escura. A 0% é preto; a 100% é branco.
Com estas rodinhas fica fácil criar «irmãs» de uma cor. O laranja deste site é hsl(35, 78%, 47%). O laranja claro que uso sobre o azul, #F6C27A, tem o matiz exatamente igual (35°): só rodei a rodinha da luminosidade. Já o laranja escuro dos títulos pequenos, #A0570E, também roda um pouco o matiz para o vermelho (30°). É um truque conhecido: quando escureces uma cor quente sem mexer em mais nada, ela tende a ficar com ar de castanho «sujo».
Uma cor, muitos tons
Uma marca precisa de poucas cores, duas ou três. Mas um site precisa de muitos tons de cada uma: um fundo clarinho para destacar uma caixa, uma borda, a cor de um botão quando passas o rato por cima, o texto...
Em vez de inventar cada tom à sorte, faço uma escada: a mesma cor, do degrau 50 (quase branco) ao degrau 900 (quase preto).
Assim as decisões ficam fáceis: o fundo de um alerta é o degrau 50, a borda é o 200, o texto é o 800. E se outra pessoa pegar no projeto, chega aos mesmos tons sem ter de adivinhar.
A regra 60-30-10
Pensa numa roupa: calças e camisola em cores calmas (a maior parte), um casaco de outra cor e um pormenor que salta à vista, como uns ténis vermelhos. Em design, chama-se a isto a regra 60-30-10:
- 60% de uma cor dominante, normalmente calma: os fundos.
- 30% de uma cor secundária: o cabeçalho, as secções, os botões.
- 10% de uma cor de destaque: só o que tem de chamar à atenção.
O mais importante são os 10%. Se juntasses aos ténis vermelhos um casaco vermelho e uma camisola vermelha, os ténis deixavam de se notar. Com o laranja deste site é igual: guardo-o para o que quero mesmo que se veja, como o botão «Falar comigo». Não é uma regra matemática; é um lembrete de que o destaque só funciona se for raro.
Neutros com personalidade
A maior parte de um ecrã são cores «neutras»: fundos, texto, bordas. Parecem só brancos e cinzentos, mas há um truque simples para o design parecer mais cuidado: não usar cinzentos puros. Pôr-lhes uma pitada de cor, como uma pitada de sal na comida.
O fundo deste site, #FAF9F7, não é branco: é um creme muito leve e quentinho (matiz 40°). O texto secundário, #40405A, não é cinzento: tem um pouco de azul (240°). Sozinhas, estas diferenças quase não se notam. Mas juntas fazem as cores parecer da mesma família, porque os neutros «conversam» com o azul da marca.
Harmonias: cores que se dão bem
Lembras-te do arco-íris enrolado num círculo? Chama-se roda das cores, e há combinações clássicas:
- Complementares: cores em lados opostos da roda. Fazem faísca: dão energia, mas cansam se forem usadas em partes iguais.
- Análogas: cores vizinhas. São calmas e combinam sem esforço.
- Triádicas: três cores à mesma distância, em triângulo. São alegres, mas difíceis de equilibrar.
O azul deste site está nos 214° e o laranja nos 35°. Estão a 179° de distância, quase exatamente opostos. É por isso que o laranja salta tanto à vista em cima do azul. E é também por isso que o uso pouco: duas cores opostas em partes iguais «discutem»; com uma a mandar e a outra só como destaque, completam-se.
Cores com significado
Algumas cores já vêm com significado, como num semáforo: verde é avançar, amarelo é atenção, vermelho é parar. Nos ecrãs aprendemos o mesmo. Quando alguém vê vermelho, pensa logo «algo correu mal», antes de ler uma única palavra. É uma grande vantagem, mas só funciona se eu respeitar estas regras e as usar sempre da mesma forma.
Gosto de as arrumar como uma escala de urgência, do que é só informativo até ao que pede ação imediata:
Vermelho: erro, perigo e ações sem volta
O vermelho é a cor mais forte que tenho, por isso uso-a com muito cuidado. É como o alarme de incêndio: se tocar a toda a hora, as pessoas deixam de ligar. Serve para três coisas:
- Erros: algo falhou e a pessoa tem de fazer alguma coisa. Um pagamento recusado, um campo mal preenchido, uma ligação que caiu.
- Ações destrutivas: apagar uma conta, eliminar um ficheiro, cancelar uma subscrição. Tudo o que não dá para desfazer.
- Valores negativos: despesas, descidas, saldos abaixo de zero.
Num erro de formulário, a borda vermelha sozinha não chega. A mensagem tem de dizer o que falhou e como resolver («Falta o @ no email»), e tem de aparecer junto do campo, não só no topo da página.
Nas ações destrutivas, o vermelho funciona como um travão. O botão diz o que vai acontecer («Apagar para sempre», e não só «OK») e, quando o risco é grande, peço uma confirmação extra, como escrever a palavra APAGAR. E nunca uso vermelho num botão que não seja perigoso, como «Comprar» ou «Continuar»: seria tocar o alarme sem haver fogo.
Laranja e amarelo: atenção, ainda não correu mal
O aviso fica entre a informação e o erro: algo pode correr mal se a pessoa não fizer nada. O cartão que expira daqui a cinco dias, a bateria fraca, um pagamento a vencer, uma foto de capa em falta. É o amarelo do semáforo: «atenção», mas ainda não «para».
O problema é que o amarelo tem um contraste péssimo sobre branco. Como texto, mal se lê. Por isso nunca o uso para texto: uso-o como fundo, com texto castanho escuro por cima, ou troco-o por um laranja escuro.
Verde: sucesso, aprovação e «está tudo bem»
O verde confirma: o pagamento foi aprovado, o formulário foi enviado, a tarefa está feita, o serviço está ligado. É também a cor de «disponível» e dos valores positivos. Como é uma cor que tranquiliza, a mensagem de sucesso deve ser curta e não obrigar a nada; muitas vezes até desaparece sozinha ao fim de uns segundos.
Há um cuidado a ter: um botão verde ao lado de um vermelho pode parecer igual para quem é daltónico (mostro isso no post sobre contraste). Por isso, a diferença tem de estar também na forma e no texto do botão.
Azul e cinzento: informação e coisas «em pausa»
O azul é a cor da informação: dicas, novidades, algo que está a acontecer, como um envio a decorrer. É também a cor clássica dos links. Não assusta nem festeja; só informa.
O cinzento marca o que está parado: um botão desativado, um rascunho, uma opção que não está disponível. Diz «isto existe, mas agora não conta». As regras de contraste não se aplicam a botões desativados, mas convém que se continue a perceber o que lá está escrito.
Como uso isto nos meus projetos
No rodapé deste site, o ponto verde vem sempre com a palavra «Disponível». No admin onde escrevo estes posts, «Publicado» é verde e «Rascunho» é cinzento. Ao preparar esta imagem, medi esse verde e dava 4,13:1, abaixo do mínimo para texto pequeno, por isso escureci-o. Na minha app pessoal, as entradas de dinheiro são verdes e as saídas vermelhas, mas os valores levam sempre o sinal + ou −, para se perceberem mesmo sem cor.
Os significados mudam de país para país
Estas regras não são iguais em todo o mundo. O exemplo mais famoso é a bolsa: na Europa e nos Estados Unidos, verde quer dizer que subiu e vermelho que desceu. Na China é ao contrário, porque lá o vermelho está ligado à sorte e à prosperidade.
Por isso tenho cuidado com a chamada «psicologia da cor». O que uma cor transmite depende do país, do contexto e até do produto. Numa interface, o que conta mais é o que as pessoas já conhecem e a consistência: se o vermelho quer dizer erro no ecrã de pagamento, tem de querer dizer erro em todo o lado.
Cor no modo escuro
O modo escuro não é virar as cores do avesso. Uma cor escura que se vê bem num fundo claro pode desaparecer num fundo escuro, como alguém vestido de preto numa rua sem luz. E cores muito vivas sobre preto parecem tremer e cansam a vista.
O que faço: um fundo cinza-azulado em vez de preto (#1E2128) e as cores de destaque mais claras, mas da mesma família. O azul da marca (214°) passa a #4A90D9 (211°), quase o mesmo matiz. Na minha app pessoal acontece o mesmo com as cores de estado: o verde de sucesso é #1A9C53 no modo claro e #32D95E no escuro, e o vermelho passa de #D92D20 para #FF5449.
Dar nomes pelo trabalho, não pelo aspeto
No código, as cores guardam-se em «caixinhas» com nome, chamadas variáveis. O truque é dar o nome pelo trabalho que a cor faz, e não pelo aspeto: --primary em vez de --azul, --text-2 em vez de --cinzento.
É como numa equipa de futebol: dizes «o guarda-redes» e não «o rapaz de amarelo», porque a camisola pode mudar e o trabalho continua o mesmo. No modo escuro, --primary continua a ser «a cor principal», só que com outro valor: #1E3A5F no claro e #4A90D9 no escuro. Se a variável se chamasse --azul-escuro, no modo escuro estaria a mentir. Neste site funciona tudo assim: mudo a cor num só sítio e o site inteiro acompanha.
As paletas dos meus projetos
- Plantas Medicinais: verdes que lembram as plantas, com um laranja quente para os destaques.
- RENATU: um único azul forte, com muito branco à volta.
- Barquinha Parque: cores tiradas do próprio lugar: o azul do Tejo, o verde do parque e um dourado.
- Painel Pessoal: fundo escuro, com verde e vermelho guardados só para o que é positivo e negativo.
O meu processo, passo a passo
- Começo por uma cor, a que melhor representa o projeto.
- Escolho os neutros, com uma pitada dessa cor ou de uma cor próxima.
- Junto um destaque, muitas vezes do lado oposto da roda, para usar com moderação.
- Faço as escadas de cada cor e escolho as cores de estado.
- Testo o contraste de todas as combinações que vou usar, nos fundos reais.
- Vejo tudo a funcionar, num ecrã a sério e nos dois modos, antes de dar a paleta por fechada.
Em resumo
- Pensa nas cores com três rodinhas: matiz, saturação e luminosidade.
- Faz escadas de tons em vez de escolher cores soltas.
- 60-30-10: o destaque só funciona se for raro.
- Neutros com uma pitada de cor parecem mais cuidados.
- Vermelho só para erros, perigo e ações sem volta: o alarme gasta-se.
- Amarelo serve de fundo, nunca de texto.
- As cores de estado nunca trabalham sozinhas: levam sempre ícone, palavra ou sinal.
- No modo escuro, clareia e suaviza em vez de virar do avesso.
- Dá nomes às cores pelo trabalho que fazem.
Uma boa paleta não é a que tem as cores mais bonitas. É a que ajuda as pessoas a perceber, sem pensar, o que é importante, o que se pode carregar e o que está a acontecer.