Compreender a Harmonia de Cores no Design de UI

A maioria das interfaces "feias" que me pedem para corrigir não tem um problema de cor na forma como as pessoas julgam. As cores individuais estão bem. O que está partido é a relação entre elas — os botões, ligações, gráficos e selos foram cada um escolhido isoladamente, e nada no ecrã concorda com nada. É essa concordância que a harmonia de cores realmente é. Não é um estado de espírito nem uma vibe; é um conjunto de relações angulares mensuráveis na roda das cores e, assim que se conseguem ver essas relações, é possível construir uma paleta em dez minutos que de outra forma levaria uma semana a empurrar valores hexadecimais até que algo deixe de parecer errado.

Este é um guia de trabalho sobre harmonia de cores no design de UI — como cada esquema se constrói na roda, os códigos hexadecimais concretos a que eu recorreria, e os erros que vejo (e cometi) vezes sem conta.

O que a harmonia de cores realmente é

A harmonia de cores é o princípio segundo o qual cores relacionadas por distâncias geométricas fixas na roda das cores parecem intencionais quando usadas em conjunto. A roda tem 360 graus de tom. Cada regra clássica de harmonia — complementar, análoga, tríade e as restantes — é apenas uma receita para escolher pontos à volta desse círculo em ângulos específicos. Escolha um tom base, aplique o ângulo, e obtém cores que o olho lê como pertencendo à mesma família em vez de um acaso.

A razão pela qual isto importa para as interfaces, mais do que para uma pintura, é que uma UI tem tarefas para a cor. Não usamos uma paleta de forma decorativa — atribuímos papéis. O modelo que uso em todos os projetos é dominante, secundário, destaque:

• Dominante é a sua espinha dorsal — superfícies, grandes preenchimentos, a cor em que o olho mais pousa. Muitas vezes um quase-neutro derivado do seu tom principal e não o tom saturado em si.
• Secundário dá-lhe apoio — fundos de secção, botões secundários, estados de hover.
• Destaque é o forte — o CTA principal, o separador ativo, o ponto de notificação. Deve ser raro. Quanto mais raro for, melhor funciona.

Uma divisão aproximada que mantenho na cabeça é algo como 60/30/10. A harmonia diz-lhe quais as cores que têm entrada na sala; a divisão dominante/secundário/destaque diz-lhe quanto usar de cada. Quem salta a segunda metade acaba com três cores perfeitamente harmoniosas a gritar todas ao mesmo volume, o que é a sua própria forma de fealdade.

Se quiser saltar a aritmética, o gerador de paleta de cores constrói cada um destes esquemas a partir de um único código hexadecimal e fornece os valores HSL e RGB — mas vale a pena perceber a construção para saber em que resultado confiar.

Complementar: duas cores, a 180 graus de distância

Os pares complementares situam-se diretamente opostos na roda. Pegue num tom base e some 180 graus. Azul #2563EB contra laranja #EA580C é o exemplo clássico, e é clássico porque funciona: contraste máximo de tom, o que faz com que um destaque praticamente vibre contra o seu fundo.

Essa vibração é exatamente por que os esquemas complementares são uma armadilha em UI. Dois complementares totalmente saturados colocados lado a lado lutam. Ponha texto vermelho vivo sobre um fundo verde vivo e os olhos não conseguem assentar — a aresta parece cintilar. A solução é nunca usar ambos com força total. Deixe um ser a grande superfície dominante, fortemente dessaturado ou escurecido, e reserve o complementar como um destaque pequeno e saturado.

Na prática, então: o dominante é uma superfície de tom azulado abafado como #1E293B, o texto do corpo é quase-branco, e o complementar aparece apenas no botão principal como #F97316. Isso é um esquema complementar, mas nunca o descreveria como "azul e laranja a chocar", porque nunca lhes deu área igual. A Stripe e a Linear apoiam-se neste tipo de destaque único de alto contraste contra um campo calmo, quase monocromático.

Análoga: vizinhas na roda

As cores análogas situam-se dentro de cerca de 30 graus umas das outras — três fatias adjacentes da roda, como #0EA5E9, #0E7490, #0D9488 (de azul-céu, passando pelo ciano, até ao turquesa). Por partilharem o tom de base, são quase impossíveis de estragar. Todo o esquema parece uma só cor a respirar.

É essa a força e a fraqueza. As paletas análogas são calmas, coesas, com um ar premium — ótimas para produtos densos em conteúdo, dashboards, tudo onde se quer que o chrome recue. O problema é o contraste: se cada cor é uma prima, nada se destaca, e a sua chamada para ação afoga-se. A minha jogada habitual é construir a interface análoga e depois pedir emprestada uma cor do lado oposto da roda apenas para o destaque. Agora tem a calma análoga mais um único soco complementar — o que é, não por acaso, a ideia da complementar dividida abaixo.

Tríade: três cores, a 120 graus de distância

Os esquemas tríades usam três tons espaçados exatamente 120 graus, formando um triângulo equilátero na roda. O clássico é vermelho–amarelo–azul, mas uma tríade mais moderna e amigável para UI é algo como #6366F1 (índigo), #10B981 (esmeralda), #F59E0B (âmbar).

A tríade é vibrante e equilibrada ao mesmo tempo, o que soa ideal até tentar usar as três cores em partes iguais e produzir algo que parece um brinquedo infantil. A disciplina que a tríade exige é uma atribuição de papéis brutal. Escolha uma das três como a sua cor de marca dominante, despromova a segunda a um papel de apoio/secundário, e use a terceira apenas como destaque comedido. Muitas paletas de produto que nunca rotularia de "tríade" são-no de facto — uma marca índigo, um estado de sucesso esmeralda, um estado de aviso âmbar é uma tríade a fazer trabalho semântico. É a harmonia tríade escondida à vista de todos, e é a forma mais inteligente de a usar: deixe as três cores corresponderem a três significados em vez de três decorações.

Complementar dividida: aquela a que mais recorro

A complementar dividida pega numa cor base, encontra a sua complementar e depois usa as duas cores adjacentes a essa complementar em vez da própria complementar. Assim, em vez de azul contra laranja puro, emparelharia azul #2563EB com #F97316 e #EAB308 — os dois tons que ladeiam o laranja.

É a minha recomendação por defeito para quem está a construir a sua primeira paleta de UI a sério. Obtém a maior parte do contraste de um esquema complementar — o seu destaque continua a saltar contra a base dominante — mas a tensão é mais suave, e ganha um segundo destaque de borla, o que é genuinamente útil: um para ações principais, outro para destaques ou ênfase secundária. É mais tolerante do que a complementar pura e mais contida do que a tríade. Se aprender apenas uma regra além da complementar, aprenda esta.

Tetrádica e quadrada: esquemas de quatro cores para os corajosos

A tetrádica (por vezes chamada complementar dupla) usa dois pares complementares — quatro cores formando um retângulo na roda. A quadrada é o caso especial em que essas quatro cores estão uniformemente espaçadas a intervalos de 90 graus.

Vou ser honesto: as harmonias de quatro cores raramente são a resposta certa para uma interface focada. Quatro tons de força comparável são muito sinal a competir, e equilibrá-los dá trabalho a sério. Onde ganham o seu lugar é na visualização de dados — gráficos, etiquetas, dashboards multicategoria — onde realmente precisa de quatro ou mais cores distinguíveis e de peso igual que ainda assim pareçam um conjunto. Para esses, um esquema quadrado como #3B82F6, #22C55E, #EF4444, #A855F7 dá-lhe quatro categorias claramente separáveis. Para trabalho de marca e de layout, trate a tetrádica como "escolha duas destas quatro para usar mesmo, e mantenha as restantes em reserva".

Monocromática: um tom, muitas tarefas

A monocromática não é propriamente uma relação da roda — é um único tom expandido numa gama tonal completa variando a luminosidade e a saturação. Um azul torna-se #EFF6FF, #BFDBFE, #3B82F6, #1D4ED8, #1E3A8A: fundos, contornos, preenchimentos, texto, tudo a partir de um único progenitor.

Todo o design system sério é monocromático no seu núcleo, mesmo quando a marca usa vários tons, porque é preciso uma escala de 9 a 11 passos por cor para lidar com superfícies, hovers, estados desativados e modo escuro. A monocromática é à prova de bala para a coesão e perigosamente fácil de tornar achatada — se cada passo estiver demasiado próximo em luminosidade, a UI perde hierarquia. Espalhe a sua escala bem aberta e verifique que os passos adjacentes são de facto distinguíveis.

Os erros que aparecem vezes sem conta

• Usar os tons da harmonia com saturação total em grandes áreas. A harmonia escolhe os tons; não lhe diz para os usar a 100%. As grandes superfícies quase sempre pedem uma versão dessaturada ou matizada do tom harmonioso, não a versão pura.
• Tratar a harmonia como o trabalho todo. Uma paleta harmoniosa sem rácio dominante/secundário/destaque é só uma discussão equilibrada onde todos gritam. Atribua papéis e áreas.
• Esquecer a acessibilidade por completo. A roda nada diz sobre contraste. Duas cores harmoniosas podem ser completamente ilegíveis em conjunto. O texto do corpo precisa de um rácio de contraste de 4,5:1 contra o seu fundo (3:1 para texto grande), e os componentes de UI e os elementos gráficos precisam de pelo menos 3:1 contra as cores adjacentes, segundo as diretrizes de contraste das WCAG 2.1. Harmonia e contraste são problemas independentes — resolva ambos.
• Deixar o "harmonioso" sobrepor-se ao "significativo". Os seus estados de sucesso, aviso e erro carregam significado. O verde-para-avançar e o vermelho-para-parar às vezes quebram uma regra de harmonia, e tudo bem. A comunicação ganha à geometria sempre.

Se ficar com uma coisa disto: a harmonia é a metade fácil. A roda entrega-lhe cores que parecem relacionadas em cerca de trinta segundos. O ofício é tudo o que vem depois — decidir qual a cor dominante, com que pouca quantidade do destaque consegue safar-se, e se alguém com baixa visão consegue de facto ler o resultado. Comece com a complementar dividida, mantenha o seu destaque raro, verifique os seus rácios de contraste, e estará à frente da maioria das interfaces que se lançam hoje.