Cores complementares divididas: contraste com menos choque

As cores complementares divididas são três cores: uma base e as duas cores de cada lado da complementar da base. Em vez de juntar o azul ao seu oposto direto, o laranja, juntas o azul ao vermelho-alaranjado e ao amarelo-alaranjado. Manténs o contraste entre quente e frio que dá vida aos esquemas complementares, mas, como nada fica exatamente oposto a outra cor, o resultado é mais agradável à vista e muito mais fácil de equilibrar num design real.

Como funcionam as cores complementares divididas

Imagina o círculo cromático como um relógio. A tua cor base está nas doze. A sua complementar está nas seis. Um esquema complementar dividido salta as seis e usa as cinco e as sete. Em graus, são matizes a cerca de 150 e 210 graus da base.

1. 1

   Escolhe um matiz base

   Começa pela cor de que o teu design trata mesmo: a cor da marca, o produto, a atmosfera. Digamos verde-azulado, com um matiz de 175 graus.

2. 2

   Encontra a complementar

   Soma 180 graus. A complementar do verde-azulado é um vermelho coral a cerca de 355 graus.

3. 3

   Anda 30 graus para cada lado

   Desloca-te 30 graus em cada sentido a partir da complementar: cerca de 325 graus (rosa) e 25 graus (laranja).

4. 4

   Ajusta a luminosidade e a saturação

   Os matizes definem o esquema, mas tu escolhes o quão clara, profunda ou suave é cada uma. É aí que a paleta começa a parecer tua.

Porque é que as complementares divididas chocam menos

Os opostos exatos, como o vermelho e o ciano ou o azul e o laranja, disputam a atenção com igual força. Lado a lado, com saturação total, podem parecer vibrar, e misturados dão cinzento. As cores complementares são poderosas por isso mesmo, mas deixam pouca margem para erro.

Num esquema dividido, as duas parceiras estão a 60 graus uma da outra, o que as torna parentes próximas. Apoiam-se em vez de lutar e, juntas, equilibram a base. Ficas com contraste e com uma aliada natural do lado quente ou do lado frio, consoante o ponto de partida.

Exemplos de paletas complementares divididas

Cinco paletas construídas com os passos acima. A primeira cor de cada linha é a base; as outras duas são as suas parceiras divididas. A luminosidade e a saturação foram afinadas para que cada conjunto sirva para trabalho real, e não apenas na teoria.

Como usar um esquema complementar dividido num design

Três cores igualmente fortes fazem o design parecer uma bandeira. Dá-lhes antes funções desiguais. A regra 60 30 10 é um bom ponto de partida: a base cobre a maior parte da área, uma parceira faz um papel de apoio e a outra aparece só onde queres que o olhar vá primeiro.

Atenuar é a tua outra alavanca. Escurece ou acinzenta a base até se comportar quase como um neutro, e as duas parceiras passam de repente a parecer intencionais em vez de berrantes. É assim que os esquemas divididos acabam por parecer sofisticados: um verde-azulado profundo, um rosa empoeirado e um alperce suave usam os mesmos matizes da versão viva, mas leem-se como um hotel boutique e não como uma bola de praia.

Círculo dos pintores ou círculo dos ecrãs

Há dois círculos cromáticos comuns. O círculo tradicional dos pintores usa o vermelho, o amarelo e o azul como primárias, por isso o oposto do vermelho é o verde. Os ecrãs usam luz vermelha, verde e azul, por isso, num círculo HSL, o oposto do vermelho é o ciano. Ambos dão esquemas válidos; basta usar sempre o mesmo. Se trabalhas em CSS, o círculo dos ecrãs é o que o hsl() usa, por isso podes gerar um esquema com um pouco de aritmética.

:root {
  --h: 175; /* base hue in degrees */
  --base: hsl(var(--h) 70% 32%);
  --split-a: hsl(calc(var(--h) + 150) 70% 60%);
  --split-b: hsl(calc(var(--h) + 210) 90% 60%);
}

Para ver uma paleta a funcionar em formatos reais, o Designer do Gradiently consegue compor um post, um story e um banner de uma só vez, para avaliares as proporções em cada tamanho e não num cartão de amostras.