Design em dois tons: visuais ousados com apenas duas cores

Design em dois tons é construir tudo, texto, formas, fundos e até fotos, com apenas duas cores: em geral uma escura e uma clara, com forte diferença de luminosidade entre elas. Cobalto e tangerina, verde-floresta e rosa-claro, tinta e manteiga. O limite é a graça. Duas cores parecem intencionais, leem-se bem em qualquer tamanho e dão a uma marca uma assinatura reconhecível mais depressa do que uma paleta completa.

Dois tons, duotone e monocromático não são a mesma coisa

Os termos são usados sem muito rigor, então ajuda separá-los. Eles se sobrepõem, e muitos bons layouts usam as três ideias ao mesmo tempo.

Se você quer a mistura e não a divisão, gradientes de duas cores trata desse lado, e esquemas de cores monocromáticos trata da versão de um só matiz.

Doze paletas de dois tons

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

Alguns são complementares, como cobalto e tangerina, o que dá energia máxima. Outros são parentes próximos, como violeta profundo e lilás, o que parece mais calmo e mais caro. Cores complementares explica por que os opostos vibram quando se encontram.

Como escolher suas duas cores

1. 1

   Escolha primeiro a cor escura

   Ela vai levar todo título e parágrafo, então precisa ser legível sobre a cor clara. Azul-marinho, verde-floresta, berinjela, chocolate e quase preto funcionam.

2. 2

   Escolha a cor clara pelo clima

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

3. 3

   Confira o contraste nos dois sentidos

   Texto escuro sobre a cor clara deve chegar a 4,5:1 para o corpo do texto. Todos os pares da grade acima passam nesse teste.

4. 4

   Teste em três formatos

   Um post quadrado, um story de 1080×1920 e um folheto A5. Se o par ainda parecer você nos três, fique com ele.

Como tirar mais alcance de duas cores

Duas cores chapadas podem parecer pouco quando você precisa de um painel secundário, uma legenda ou um botão desativado. A solução não é uma terceira cor. Misture tons mais claros da cor clara e mais escuros da cor escura, para que cada novo tom ainda pertença ao par.

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

Fotos em dois tons com duotone

As fotos são onde os layouts em dois tons costumam quebrar: uma imagem colorida joga uma terceira, quarta e quinta cor na página. Um tratamento duotone remapeia a foto para que suas sombras virem a sua cor escura e suas luzes a clara. O efeito duotone aprofunda o assunto; na web você pode fazê-lo com modos de mesclagem.

.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 você pode tingir qualquer foto com as cores do Mark, em mono, duotone ou lavado, para que as imagens entrem no design em vez de brigar com ele.

Ideias de design em dois tons para testar

• Pôsteres de shows e eventos: duas cores especiais imprimem barato e parecem intencionais de longe.
• Cardápios de restaurante: uma cor escura para os pratos, a clara para o papel, um tom médio para os preços.
• Carrosséis do Instagram: alterne qual cor é o fundo em cada slide, para que o deslizar tenha ritmo.
• Embalagens: uma cor por linha de produto, a outra compartilhada em toda a gama.
• Apresentações: slides de seçã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, meça com as ferramentas de contraste de cor e acessibilidade. Se você gosta da disciplina de duas cores, o mesmo raciocínio está em design gráfico minimalista e, em volume máximo, em design gráfico ousado.