# Design a duas cores: looks fortes com apenas duas cores

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

Duas cores, bem escolhidas, podem sustentar uma marca inteira: cartazes, ementas, posts e fotografias. Aqui fica como escolher o par, tirar-lhe mais alcance e evitar que pareça plano.

## The short version

- O design a duas cores constrói todos os elementos com duas cores, normalmente uma escura e uma clara, sem terceira cor além de tons das duas.
- O par precisa de uma diferença clara de luminosidade, para que o texto e as formas se leiam bem seja qual for a cor por cima.
- Os tons claros e escuros das duas cores dão a uma paleta de duas cores alcance suficiente para fundos, painéis e texto secundário.
- As fotografias em duotone levam as sombras de uma imagem para a cor escura e as luzes para a clara, o que permite à fotografia condizer com uma composição a duas cores.
- As composições a duas cores destacam-se em feeds carregados porque parecem intencionais, e imprimem-se barato como duas cores diretas.

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.

| Termo | O que significa | Uso típico |
| --- | --- | --- |
| Duas cores | Um design inteiro feito de duas cores distintas | Cartazes, ementas, embalagens, sistemas de marca |
| Duotone | Uma fotografia remapeada para duas cores, as sombras para uma e as luzes para a outra | Fotografia dentro de uma composição a duas cores |
| Monocromático | Tons claros e escuros de um só matiz | Marcas calmas, de uma só cor |
| Gradiente de duas cores | Duas cores misturadas suavemente uma na outra | Fundos e secções de destaque |

As duas cores mantêm as cores separadas; um gradiente mistura-as. Ambos podem viver na mesma marca.

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

- Cobalto e tangerina: `linear-gradient(135deg, #172e70 0%, #172e70 50%, #ff7a1a 50%, #ff7a1a 100%)`
- Verde-floresta e rosa-pálido: `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%)`
- Beringela e lima: `linear-gradient(135deg, #3b0a45 0%, #3b0a45 50%, #d9f99d 50%, #d9f99d 100%)`
- Vermelho de cartaz e creme: `linear-gradient(135deg, #b8261a 0%, #b8261a 50%, #f7ecd9 50%, #f7ecd9 100%)`
- Verde-azulado escuro 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%)`
- Bordô 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 escuro e lilás: `linear-gradient(135deg, #2e1065 0%, #2e1065 50%, #c4b5fd 50%, #c4b5fd 100%)`

Doze pares, divididos na diagonal. Cada um pode trocar a cor que serve de fundo, o que duplica as tuas composições.

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

## Como escolher as tuas duas cores

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

- 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 de papel quente, e o cobalto a 40% serve para texto secundário sobre painéis escuros.

- **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](https://gradiently.design/pt-pt/guide/duotone-effect) vai mais fundo; na web podes fazê-lo com modos de mistura.

```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 cinzenta, multiplica-se sobre o tom claro, e depois o tom escuro eleva as sombras a cobalto.

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

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

Uma composição dividida: uma cor guarda as palavras, a outra guarda o ambiente.

Um post vertical minimalista com o texto Ementa de primavera numa cor escura sobre um fundo claro

Uma composição minimalista onde a cor clara é o fundo e a cor escura faz todo o texto.

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

### Evita

- Duas cores de luminosidade semelhante
- Esgueirar uma terceira cor para um botão
- Fotografias a cores colocadas sem tratamento
- Texto claro sobre a cor clara

### Faz

- Uma claramente escura, outra claramente clara
- Tons claros e escuros do par em vez disso
- Duotone em todas as fotografias, nas duas cores
- Verifica o contraste nos dois sentidos

Para o contraste nos dois sentidos, mede com as ferramentas de [contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility). Se gostas da disciplina das duas cores, o mesmo raciocínio percorre o [design gráfico minimalista](https://gradiently.design/pt-pt/guide/minimalist-design-ideas) e, em volume máximo, o [design gráfico arrojado](https://gradiently.design/pt-pt/guide/bold-design-ideas).

## FAQ

### O que é o design a duas cores?

Um design construído inteiramente com duas cores, normalmente uma escura e uma clara, com tons dessas duas permitidos mas sem terceira cor.

### Que duas cores combinam bem num design?

Qualquer par com uma diferença clara de luminosidade, como cobalto e tangerina, verde-floresta e rosa-pálido, ou tinta e manteiga. A mais escura deve ler-se sobre a mais clara.

### Qual é a diferença entre duas cores e duotone?

Duas cores descreve uma composição inteira feita com duas cores. Duotone descreve uma fotografia remapeada para que as suas sombras e luzes passem a ser duas cores.

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

Põe a imagem em tons de cinzento, mistura-a com `mix-blend-mode: multiply` sobre a cor clara e depois sobrepõe a cor escura com `mix-blend-mode: lighten`.

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

Na serigrafia e na impressão offset com cores diretas, menos tintas costuma significar menos ecrãs ou chapas, por isso os trabalhos a duas cores são geralmente mais baratos do que a quadricromia.