Cores complementares divididas: contraste com menos choque

Cores complementares divididas são três cores: uma base mais as duas cores de cada lado do complemento da base. Em vez de combinar o azul com seu oposto direto, o laranja, você combina o azul com o vermelho-alaranjado e o amarelo-alaranjado. Você mantém o contraste entre quente e frio que dá vida aos esquemas complementares, mas, como nada fica exatamente oposto a nada, o resultado é mais agradável ao olho e muito mais fácil de equilibrar num design real.

Como funcionam as cores complementares divididas

Imagine o círculo cromático como um relógio. Sua cor base está nas doze. Seu complemento está nas seis. Um esquema complementar dividido pula as seis e pega as cinco e as sete. Em graus, são tons a cerca de 150 e 210 graus da base.

1. 1

   Escolha um tom base

   Comece pela cor sobre a qual seu design realmente trata: a cor da marca, o produto, o clima. Digamos azul-petróleo, com um tom de 175 graus.

2. 2

   Encontre o complemento

   Some 180 graus. O complemento do azul-petróleo é um vermelho coral a cerca de 355 graus.

3. 3

   Ande 30 graus para cada lado

   Vá 30 graus para cada lado a partir do complemento: cerca de 325 graus (rosa) e 25 graus (laranja).

4. 4

   Ajuste luminosidade e saturação

   Os tons definem o esquema, mas você escolhe quão clara, profunda ou apagada é cada uma. É aí que a paleta começa a parecer sua.

Por que o complementar dividido choca menos

Opostos exatos, como vermelho e ciano ou azul e laranja, disputam a atenção com a mesma força. Lado a lado, em saturação total, podem parecer vibrar, e misturados viram cinza. As cores complementares são poderosas por isso, mas deixam pouca margem de erro.

Num esquema dividido, os dois parceiros ficam a 60 graus um do outro, o que os faz parentes próximos. Eles se apoiam em vez de brigar e, juntos, equilibram a base. Você tem contraste com um aliado natural do lado quente ou do lado frio, conforme o ponto de partida.

Exemplos de paletas complementares divididas

Cinco paletas feitas com os passos acima. A primeira cor de cada linha é a base; as outras duas são seus parceiros divididos. A luminosidade e a saturação foram ajustadas para cada conjunto servir ao trabalho real, e não só estar teoricamente correto.

Como usar um esquema complementar dividido num design

Três cores igualmente intensas fazem o design parecer uma bandeira. Dê a elas funções desiguais. A regra 60 30 10 é um bom ponto de partida: a base cobre a maior parte da área, um parceiro tem papel de apoio e o outro aparece só onde você quer que o olhar vá primeiro.

Apagar as cores é sua outra alavanca. Escureça ou acinzente a base até ela se comportar quase como um neutro, e os dois parceiros de repente parecem intencionais em vez de berrantes. É assim que os esquemas divididos acabam parecendo sofisticados: um azul-petróleo profundo, um rosa empoeirado e um damasco suave usam os mesmos tons da versão viva, mas se leem como um hotel boutique, e não como uma bola de praia.

Círculo dos pintores ou círculo das telas

Há dois círculos cromáticos comuns. O círculo tradicional dos pintores usa vermelho, amarelo e azul como primárias, então o oposto do vermelho é o verde. As telas usam luz vermelha, verde e azul, então num círculo HSL o oposto do vermelho é o ciano. Os dois dão esquemas válidos; só use um círculo de modo consistente. Se você trabalha em CSS, o círculo das telas é o que o hsl() usa, então dá para 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 funcionando em formatos reais, o Designer do Gradiently pode diagramar um post, um story e um banner de uma só vez, e você avalia as proporções em cada tamanho em vez de num cartão de amostras.