Design a duas cores: looks fortes com apenas duas cores

O design a duas cores consiste em construir tudo, texto, formas, fundos e até fotografias, com apenas duas cores: normalmente uma escura e uma clara, com uma forte diferença de luminosidade entre elas. Cobalto e tangerina, verde-floresta e rosa-pálido, tinta e manteiga. O limite é o objetivo. Duas cores parecem intencionais, leem-se com clareza em qualquer tamanho e dão a uma marca uma assinatura reconhecível mais depressa do que uma paleta completa.

Duas cores, duotone e monocromático não são a mesma coisa

As palavras usam-se com alguma liberdade, por isso ajuda separá-las. Sobrepõem-se, e muitas boas composições usam as três ideias ao mesmo tempo.

Se queres a mistura e não a divisão, os gradientes de duas cores tratam desse lado, e os esquemas de cores monocromáticos tratam da versão de um só matiz.

Doze paletas de duas cores

Cada par abaixo tem uma cor suficientemente escura para pôr texto sobre a outra. O contraste entre matizes importa menos do que o contraste de luminosidade: um par pode ser quente e frio, ou duas cores vizinhas, desde que uma seja claramente mais escura.

Alguns destes são complementares, como cobalto e tangerina, o que dá a máxima energia. Outros são parentes próximos, como violeta escuro e lilás, o que parece mais calmo e mais caro. As cores complementares explicam porque é que os opostos vibram quando se encontram.

Como escolher as tuas duas cores

1. 1

   Escolhe primeiro a cor escura

   Vai levar todos os títulos e parágrafos, por isso tem de se ler sobre a cor clara. Azul-marinho, verde-floresta, beringela, chocolate e quase preto funcionam todos.

2. 2

   Escolhe a cor clara pelo ambiente

   É a cor de que as pessoas se lembram. Claros quentes como pêssego e manteiga parecem simpáticos; claros frios como céu e lilás parecem mais calmos.

3. 3

   Verifica o contraste nos dois sentidos

   O texto escuro sobre a cor clara deve chegar a 4,5:1 para texto corrido. Todos os pares da grelha acima passam esse teste.

4. 4

   Experimenta em três formatos

   Um post quadrado, um story de 1080×1920 e um cartaz A5. Se o par continuar a parecer-se contigo nos três, fica com ele.

Como tirar mais alcance de duas cores

Duas cores lisas podem parecer pobres quando precisas de um painel secundário, uma legenda ou um botão desativado. A solução não é uma terceira cor. Mistura tons claros da cor clara e tons escuros da escura, para que cada novo tom continue a pertencer ao par.

• Fundo: o tom mais claro, para grandes áreas e páginas de texto.
• Principal: a cor escura, para títulos, texto corrido e blocos sólidos.
• Destaque: a cor clara em força total, para uma forma, uma palavra ou um preço.
• Tons intermédios: um tom médio de cada, para divisórias, legendas e preenchimentos de ilustração.

Fotografias a duas cores com duotone

As fotografias são o ponto onde as composições a duas cores costumam falhar: uma imagem a cores traz uma terceira, quarta e quinta cor para a página. Um tratamento duotone remapeia a fotografia para que as sombras passem a ser a tua cor escura e as luzes a tua cor clara. O efeito duotone vai mais fundo; na web podes fazê-lo com modos de mistura.

.duotone {
  position: relative;
  background-color: #ff7a1a; /* light tone: the highlights */
}

.duotone img {
  display: block;
  width: 100%;
  filter: grayscale(100%) contrast(1.15);
  mix-blend-mode: multiply;
}

.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #172e70; /* dark tone: the shadows */
  mix-blend-mode: lighten;
  pointer-events: none;
}

No Gradiently podes tingir qualquer fotografia com as cores do Mark em mono, duotone ou aguada, para que as imagens se juntem ao design em vez de lutarem contra ele.

Ideias de design a duas cores para experimentar

• Cartazes de concertos e eventos: duas cores diretas imprimem-se barato e parecem intencionais do outro lado da rua.
• Ementas de restaurantes: uma cor escura para os pratos, a clara para o papel, um tom médio para os preços.
• Carrosséis do Instagram: alterna a cor que serve de fundo em cada slide, para que deslizar tenha ritmo.
• Embalagens: uma cor por linha de produto, a outra partilhada por toda a gama.
• Apresentações: slides de secção na cor escura, slides de conteúdo no tom claro.
• Cartões de visita: um lado em cada cor.

Para o contraste nos dois sentidos, mede com as ferramentas de contraste de cor e acessibilidade. Se gostas da disciplina das duas cores, o mesmo raciocínio percorre o design gráfico minimalista e, em volume máximo, o design gráfico arrojado.