Como Usar uma Roda de Cor para Escolher Cores

A primeira vez que realmente percebi a roda de cor não foi a partir de um manual. Estava a olhar para dois azuis que pareciam quase idênticos no meu painel de amostras mas que eram lidos de forma completamente diferente no ecrã, e não conseguia explicar porquê. Foi a roda que finalmente fez tudo fazer sentido: assim que deixa de a ver como um poster na parede de uma sala de aula e começa a vê-la como um mapa de decisões, escolher cores deixa de ser adivinhação. Este é o guia que eu gostava de ter tido — como a roda é de facto construída, o que cada parte dela controla, e como ler as harmonias como ângulos para os quais pode rodar de propósito.

O que a roda de cor é, de facto

Tire a decoração e uma roda de cor é apenas a matiz enrolada num círculo. A matiz é a parte do "que cor" — vermelho, laranja, o verde específico de um semáforo. Como o espetro visível volta sobre si mesmo (o vermelho desvanece-se em violeta, que se desvanece de volta na direção do vermelho), faz sentido dobrá-lo num anel em vez de numa linha. Por isso o ângulo da roda é a matiz, medido de 0° a 360°.

Essa única ideia é todo o truque. Cada regra de harmonia de que já ouviu falar — complementar, tríade, análoga — é na verdade apenas uma instrução sobre ângulos. "Complementar" significa "vai para o lado oposto". "Tríade" significa "avança um terço do caminho à volta, três vezes". Assim que interioriza que a roda é um mostrador de 360° para a matiz, as regras com nome tornam-se coisas que pode fazer com as mãos em vez de termos que memoriza.

Primárias, secundárias, terciárias — e a armadilha do RYB

É aqui que a maioria das explicações lhe mente em silêncio. A roda clássica que pintou na escola é a roda RYB: primárias vermelho, amarelo, azul; secundárias (misturando duas primárias) laranja, verde, roxo; terciárias (misturando uma primária com a sua secundária vizinha) as matizes intermédias como vermelho-laranja ou azul-esverdeado. Esse modelo descreve como o pigmento físico se mistura. É como a tinta se comporta, e é genuinamente útil num cavalete.

Mas o seu ecrã não mistura tinta. Mistura luz, e a luz é aditiva: as primárias são vermelho, verde e azul, e as secundárias são ciano, magenta e amarelo. É por isto que uma roda de cor digital — a que está dentro do gerador de paletas de cores e basicamente de todas as ferramentas de design modernas — é construída sobre a geometria RGB/HSL, não RYB. A consequência prática faz tropeçar as pessoas constantemente: numa roda RYB o complemento do vermelho é o verde, mas na roda RGB/HSL o complemento do vermelho (0°) é o ciano (180°). Nenhuma está errada. Estão a responder a perguntas diferentes. Se está a escolher cores para um website, uma app ou qualquer coisa que brilhe, confie na roda digital — ela prevê o que os píxeis vão fazer.

Trago isto à baila porque já vi designers a lutar contra as suas ferramentas, esperando a lógica da tinta de um ecrã. Saber em que roda está poupa muita confusão.

Matiz, saturação, luminosidade: ler a roda em três dimensões

Um círculo plano só lhe mostra a matiz. A cor real precisa de mais duas dimensões, e a genialidade do modelo HSL é que as coloca na mesma roda de uma forma que consegue sentir.

• A matiz é o ângulo. Segundo a especificação CSS e a MDN, o vermelho fica a 0deg, o amarelo a 60deg, o verde a 120deg, o ciano a 180deg, o azul a 240deg e o magenta a 300deg. Rodar à volta da roda muda qual cor tem, e nada mais.
• A saturação é a distância ao centro. No aro, a cor está totalmente saturada e vívida. Arraste na direção do meio e escorre na direção do cinzento. O centro exato não tem cor nenhuma.
• A luminosidade é normalmente um cursor separado (de cima para baixo, do preto ao branco), porque não consegue empilhar um terceiro eixo num círculo 2D. Algumas ferramentas dobram o valor no raio. De uma forma ou de outra, a luminosidade é o que faz de hsl(210, 80%, 30%) um azul-marinho profundo e de hsl(210, 80%, 85%) um céu pálido — mesma matiz, mesma saturação, brilho diferente.

Quando arrasta o ponto na roda interativa, está a mover-se exatamente nestes termos: ângulo para a matiz, raio para a saturação, cursor para a luminosidade. Observe os valores HSL e RGB a atualizarem-se à medida que avança — é a forma mais rápida que conheço de construir uma intuição sobre porque uma cor está a fazer o que faz. Puxe o ponto na direção do centro e um laranja berrante torna-se uma terracota sofisticada sem a sua matiz mudar de todo. Esse movimento — dessature, não volte a mudar a matiz — corrige mais paletas amadoras do que qualquer outro ajuste.

Ler cada harmonia como um ângulo

É esta a recompensa. Cada regra de harmonia é um molde geométrico que gira sobre a roda. Escolha uma matiz base, e a regra diz-lhe onde as outras aterram.

• Complementar — a 180° de distância. Uma base, uma do outro lado da roda. Contraste máximo, energia máxima. Ótima para uma chamada à ação contra um fundo calmo; exaustiva se deixar as duas cores lutar em saturação máxima por todo um layout.
• Análoga — vizinhas dentro de cerca de ±30°. Pense em #1B6CA8, #1B9AA8, #1BA87E: azuis a deslizar para o verde-azulado. Baixa tensão, muito natural (é a paleta da maioria dos pores do sol e das florestas). Escolha uma para dominar para que não seja lida como papa.
• Tríade — três matizes a 120° de distância. Equilibrada e animada. A sensação clássica do vermelho-amarelo-azul vive aqui, embora na roda digital o trio se desloque. Deixe uma liderar e as outras duas apoiar.
• Complementar dividida — a sua base, mais os dois vizinhos do seu complemento em vez do próprio complemento. Mantém o impacto do contraste mas suaviza a colisão frontal. É a minha opção por omissão quando a complementar parece demasiado agressiva — escrevi mais sobre esse compromisso em complementar dividida vs paletas em tríade.
• Tetrádica — dois pares complementares a formar um retângulo. Rica mas difícil de equilibrar; precisa mesmo de despromover três das quatro a acentos.
• Quadrado — quatro matizes espaçadas uniformemente a 90°. Como a tetrádica mas simétrica, por isso é ainda mais exigente. Use com parcimónia.
• Monocromática — uma matiz, variada apenas pela saturação e luminosidade. Sem rotação nenhuma, apenas movimento ao longo do raio e do cursor. A opção mais segura e mais coesa, e um ótimo ponto de partida se uma paleta parecer caótica.

Alterne entre estas regras no gerador e veja os pontos a saltar para novas posições na mesma roda. Ver os ângulos a mover-se vale mais do que qualquer quantidade de memorização.

Um método repetível que realmente uso

Eis o fluxo de trabalho, de princípio a fim:

• Ancore primeiro. Escolha uma matiz que tenha de estar lá — uma cor de marca, uma fotografia de produto, um ambiente. Arraste o ponto até ela e anote o HSL.
• Escolha a relação, não as cores. Decida quanta tensão quer. Calma e unificada? Análoga ou monocromática. Precisa de um ponto focal? Complementar ou complementar dividida. Deixe o ângulo fazer a escolha.
• Controle com a saturação e a luminosidade, não com a matiz. Assim que as matizes estiverem colocadas, resista a voltar a rodar. Afine antes o raio e o cursor. A maioria das paletas "fora de tom" está certa na matiz e errada na saturação.
• Atribua papéis. Nunca divida as cores em partes iguais. Uma dominante, uma secundária e um pequeno acento — a regra 60-30-10 é a forma mais fácil de impedir que uma cor intimide as restantes.
• Verifique o contraste antes de se comprometer. Uma relação deslumbrante na roda não significa nada se o texto não se ler. Passe o seu par de texto e fundo pelo verificador WCAG integrado; procure pelo menos 4.5:1 para texto corrido, segundo a orientação de contraste do W3C. Aprofundo o porquê em os rácios de contraste WCAG explicados.

A roda escolhe relações. A saturação, a luminosidade e a proporção transformam essas relações em algo utilizável. Se quiser aprofundar o que estas combinações realmente comunicam, perceber a harmonia de cor no design de UI pega onde a geometria deixa.

Os erros que vejo com mais frequência

Dois padrões, vezes sem conta. Primeiro, saturação máxima em todo o lado — todas as cores no máximo, junto ao aro. A roda dar-lhe-á com gosto uma tríade perfeita, mas se as três estiverem no máximo, o resultado vibra. Puxe a maioria delas para dentro. Segundo, tratar as regras com nome como leis. São pontos de partida. Um ângulo "errado" que ajustou em 10° porque ficava melhor é melhor. A roda é uma ferramenta para fazer primeiros movimentos rápidos e defensáveis — não um livro de regras a que deve obediência. Arraste o ponto, confie nos seus olhos, e deixe que os valores apresentados lhe ensinem o vocabulário à medida que avança.