# Design em dois tons: visuais ousados com apenas duas cores

[Canonical HTML page](https://gradiently.design/pt-br/guide/two-tone-design)

Duas cores bem escolhidas podem sustentar uma marca inteira: pôsteres, cardápios, posts e fotos. Veja como escolher o par, tirar mais alcance dele e evitar que fique chapado.

## The short version

- O design em dois tons constrói cada elemento com duas cores, em geral uma escura e uma clara, sem terceira cor além das variações das duas.
- O par precisa de uma diferença clara de luminosidade, para que texto e formas continuem legíveis qualquer que seja a cor por cima.
- Tons mais claros e mais escuros das duas cores dão à paleta de dois tons alcance suficiente para fundos, painéis e texto secundário.
- Fotos em duotone levam as sombras da imagem para a cor escura e as luzes para a clara, o que combina a fotografia com um layout em dois tons.
- Layouts em dois tons se destacam em feeds cheios porque parecem intencionais, e imprimem barato como duas cores especiais.

**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.

| Termo | O que significa | Uso típico |
| --- | --- | --- |
| Dois tons | Um design inteiro feito de duas cores distintas | Pôsteres, cardápios, embalagens, sistemas de marca |
| Duotone | Uma foto remapeada para duas cores, sombras em uma e luzes na outra | Fotografia dentro de um layout em dois tons |
| Monocromático | Tons mais claros e mais escuros de um só matiz | Marcas calmas, de uma cor só |
| Gradiente de duas cores | Duas cores misturadas suavemente uma na outra | Fundos e seções de destaque |

O dois tons mantém as cores separadas; o gradiente as mistura. Os dois cabem em uma mesma marca.

Se você quer a mistura e não a divisão, [gradientes de duas cores](https://gradiently.design/pt-br/guide/two-color-gradients) trata desse lado, e [esquemas de cores monocromáticos](https://gradiently.design/pt-br/guide/monochromatic-color-scheme) 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.

- Cobalto e tangerina: `linear-gradient(135deg, #172e70 0%, #172e70 50%, #ff7a1a 50%, #ff7a1a 100%)`
- Floresta e rosa-claro: `linear-gradient(135deg, #14532d 0%, #14532d 50%, #fbcfe8 50%, #fbcfe8 100%)`
- Tinta e manteiga: `linear-gradient(135deg, #111827 0%, #111827 50%, #fde68a 50%, #fde68a 100%)`
- Azul Klein e papel: `linear-gradient(135deg, #002fa7 0%, #002fa7 50%, #f4f1ea 50%, #f4f1ea 100%)`
- Verde corrida e mostarda: `linear-gradient(135deg, #004225 0%, #004225 50%, #e1ad01 50%, #e1ad01 100%)`
- Berinjela e lima: `linear-gradient(135deg, #3b0a45 0%, #3b0a45 50%, #d9f99d 50%, #d9f99d 100%)`
- Vermelho pôster e creme: `linear-gradient(135deg, #b8261a 0%, #b8261a 50%, #f7ecd9 50%, #f7ecd9 100%)`
- Teal profundo e pêssego: `linear-gradient(135deg, #134e4a 0%, #134e4a 50%, #fdba8c 50%, #fdba8c 100%)`
- Chocolate e céu: `linear-gradient(135deg, #3e2723 0%, #3e2723 50%, #bae6fd 50%, #bae6fd 100%)`
- Sangue de boi e rosa pálido: `linear-gradient(135deg, #5c1a1b 0%, #5c1a1b 50%, #f6d1cf 50%, #f6d1cf 100%)`
- Preto e amarelo fluorescente: `linear-gradient(135deg, #0a0a0a 0%, #0a0a0a 50%, #dfff00 50%, #dfff00 100%)`
- Violeta profundo e lilás: `linear-gradient(135deg, #2e1065 0%, #2e1065 50%, #c4b5fd 50%, #c4b5fd 100%)`

Doze pares, divididos na diagonal. Cada um pode trocar qual cor é o fundo, o que dobra seus layouts.

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](https://gradiently.design/pt-br/guide/complementary-colors) explica por que os opostos vibram quando se encontram.

## Como escolher suas duas cores

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. **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. **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. **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.

- Cobalto: #172e70
- Cobalto 75: #516294
- Cobalto 40: #a2abc6
- Tangerina 10: #fdf0e6
- Tangerina 55: #ffb780
- Tangerina: #ff7a1a

Um par, seis tons. A tangerina a 10% faz um fundo quente de papel, e o cobalto a 40% serve para texto secundário em painéis escuros.

- **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](https://gradiently.design/pt-br/guide/duotone-effect) aprofunda o assunto; na web você pode fazê-lo com modos de mesclagem.

```css
.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;
}
```

Um duotone cobalto e tangerina. A imagem fica cinza, multiplica sobre o tom claro e depois o tom escuro leva as sombras ao cobalto.

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

Um post vertical dividido em dois blocos de cor, com Aberto até tarde às sextas em um dos lados

Um layout dividido: uma cor guarda as palavras, a outra guarda o clima.

Um post vertical minimalista com Cardápio de primavera em cor escura sobre fundo claro

Um layout minimalista em que a cor clara é o fundo e a escura faz todo o texto.

- **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.

### Evite

- Duas cores de luminosidade parecida
- Escorregar uma terceira cor para um botão
- Fotos coloridas jogadas sem tratamento
- Texto claro sobre a cor clara

### Faça

- Uma claramente escura, outra claramente clara
- Tons mais claros e mais escuros do par
- Duotone em toda foto, nas duas cores
- Confira o contraste nos dois sentidos

Para o contraste nos dois sentidos, meça com as ferramentas de [contraste de cor e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility). Se você gosta da disciplina de duas cores, o mesmo raciocínio está em [design gráfico minimalista](https://gradiently.design/pt-br/guide/minimalist-design-ideas) e, em volume máximo, em [design gráfico ousado](https://gradiently.design/pt-br/guide/bold-design-ideas).

## FAQ

### O que é design em dois tons?

Um design feito inteiramente de duas cores, em geral uma escura e uma clara, com variações das duas permitidas, mas sem uma terceira cor.

### Que duas cores combinam bem em um design?

Qualquer par com diferença clara de luminosidade, como cobalto e tangerina, floresta e rosa-claro, ou tinta e manteiga. A mais escura deve ser legível sobre a mais clara.

### Qual a diferença entre dois tons e duotone?

Dois tons descreve um layout inteiro feito de duas cores. Duotone descreve uma foto remapeada para que suas sombras e luzes virem duas cores.

### Como faço uma imagem duotone em CSS?

Deixe a imagem em escala de cinza, mescle-a com `mix-blend-mode: multiply` sobre a cor clara e depois sobreponha a cor escura com `mix-blend-mode: lighten`.

### A impressão em duas cores é mais barata?

Na serigrafia e na impressão offset com cores especiais, menos tintas costuma significar menos telas ou chapas, então trabalhos em duas cores geralmente custam menos que em cores completas.