# Esquema de cores monocromático: um matiz, uma identidade inteira

[Canonical HTML page](https://gradiently.design/pt-br/guide/monochromatic-color-scheme)

Um só matiz parece limitante até você ver quanta amplitude cabe dentro dele. Bem construída, uma única cor cobre fundos, textos, botões e gradientes, e parece mais marcante do que um arco-íris.

## The short version

- Um esquema de cores monocromático usa um único matiz numa faixa de luminosidade e saturação, construída com tintas, sombras e tons.
- Uma tinta é um matiz misturado com branco, uma sombra é um matiz misturado com preto e um tom é um matiz misturado com cinza.
- Uma rampa monocromática útil tem cerca de nove ou dez passos, do quase branco ao quase preto, com espaçamento uniforme na luminosidade percebida.
- Deslocar levemente o matiz em direção às pontas clara e escura evita que uma paleta monocromática pareça sem vida.
- Paletas monocromáticas fazem gradientes calmos e coesos, mas misturas lentas de um só matiz formam banding com facilidade e se beneficiam de um grão fino.

Um **esquema de cores monocromático** usa um matiz e nada além dele, variado em luminosidade e saturação. Pense em azul-marinho, cobalto, céu e gelo: tudo azul, tudo claramente relacionado e com contraste suficiente entre si para dar conta de fundos, textos e destaques. Como todas as cores compartilham o mesmo matiz, uma paleta monocromática sempre parece unificada. O trabalho está em construir amplitude suficiente dentro desse único matiz.

Este guia cobre as três formas de variar um matiz, como montar uma rampa com a qual dá para projetar de verdade e como o monocromático funciona em gradientes. Para o contexto mais amplo, veja [noções básicas de teoria das cores](https://gradiently.design/pt-br/guide/color-theory-basics).

## Tintas, sombras e tons

Toda cor de uma paleta monocromática vem de um de três movimentos. Uma **tinta** acrescenta branco, deixando a cor mais clara e mais suave. Uma **sombra** acrescenta preto, deixando-a mais profunda. Um **tom** acrescenta cinza, deixando-a mais silenciosa sem mudar muito a luminosidade.

- Tintas: em direção ao branco: `linear-gradient(90deg, #2563eb 0%, #ffffff 100%)`
- Sombras: em direção ao preto: `linear-gradient(90deg, #2563eb 0%, #000000 100%)`
- Tons: em direção ao cinza: `linear-gradient(90deg, #2563eb 0%, #7a7a7a 100%)`

Um azul, três direções. A maioria das paletas monocromáticas usa as três.

## Como montar uma paleta monocromática

Um punhado de tintas aleatórias não é uma paleta. O que você quer é uma rampa: uma sequência de passos do quase branco ao quase preto, com espaçamento uniforme, de modo que cada passo pareça tão diferente do vizinho quanto o anterior. De nove a onze passos é um tamanho comum, e é o que a maioria dos sistemas de design usa.

- Verde-azulado 50: #f0fdfa
- Verde-azulado 100: #ccfbf1
- Verde-azulado 200: #99f6e4
- Verde-azulado 300: #5eead4
- Verde-azulado 400: #2dd4bf
- Verde-azulado 500: #14b8a6
- Verde-azulado 600: #0d9488
- Verde-azulado 700: #0f766e
- Verde-azulado 800: #115e59
- Verde-azulado 900: #134e4a

Uma rampa verde-azulada de dez passos. Passos claros para fundos, passos do meio para cor, passos escuros para texto.

1. **Escolha o matiz central** Escolha a versão da cor de que você mais gosta em força total. Ela vira o meio da rampa.
2. **Defina as pontas** Escolha um quase branco com um toque do matiz e um quase preto com um toque do matiz. Evite o branco e o preto puros; parecem desconectados.
3. **Preencha os passos pela luminosidade** Espace os passos pela luminosidade que aparentam, não por valores iguais de hex ou HSL. Espaços perceptuais como o OKLCH facilitam isso; veja [gradientes em OKLCH](https://gradiently.design/pt-br/guide/css-gradient-oklch).
4. **Reduza a saturação nas pontas** Os passos muito claros e muito escuros ficam melhores um pouco suavizados. Saturação total nos extremos parece berrante ou barrenta.
5. **Desloque o matiz** Deixe a ponta clara derivar um pouco para o quente ou o frio e a ponta escura para o outro lado. Isso dá vida sem quebrar o esquema.

### Por que um leve deslocamento de matiz ajuda

Objetos reais raramente escurecem só ao acrescentar preto: as sombras captam luz mais fria ou mais quente do entorno. Uma rampa que só mistura preto e branco parece chapada em comparação. Deslocar o matiz alguns graus ao longo da rampa é prática padrão em ilustração e em sistemas de design.

- Rampa reta: só branco e preto: `linear-gradient(90deg, #d3e0fb 0% 20%, #7ca1f3 20% 40%, #2563eb 40% 60%, #1a45a5 60% 80%, #0f285e 80% 100%)`
- Matiz deslocado: céu a índigo: `linear-gradient(90deg, #e0f7ff 0% 20%, #7cc4f5 20% 40%, #2563eb 40% 60%, #2f3aa8 60% 80%, #1e1b4b 80% 100%)`

Duas rampas azuis de cinco passos em torno do mesmo centro, `#2563eb`. A segunda deriva para o céu na ponta clara e para o índigo na escura, então parece iluminada, e não misturada.

## Conduzindo uma identidade inteira com um só matiz

Uma marca monocromática pode ser surpreendentemente marcante, porque é disciplinada de um jeito que a maioria das marcas não é. O truque é dar uma função a cada passo da rampa e manter-se fiel a ela.

| Passo da rampa | Função |
| --- | --- |
| 50 a 100 | Fundos de página e de cartão |
| 200 a 300 | Bordas, divisores, preenchimentos discretos |
| 400 a 600 | Cor da marca, botões, ilustração |
| 700 a 800 | Títulos, links, preenchimentos fortes |
| 900 e mais escuro | Texto corrido, fundos de modo escuro |

Funções para uma rampa monocromática. Texto e fundo vêm de pontas opostas, que é onde mora o contraste.

Combine sempre texto e fundo de pontas opostas da rampa. Dois passos do meio ficam lindos como amostras e falham como texto; confira com as diretrizes de [contraste de cor](https://gradiently.design/pt-br/guide/color-contrast-accessibility). Registre a rampa, com a função de cada passo, no seu [kit de marca](https://gradiently.design/pt-br/guide/brand-kit) para que todos usem os mesmos valores.

Um post editorial vertical com título serifado sobre um fundo suave de um só matiz

Um campo calmo de uma só família sob tipografia editorial.

Um cabeçalho de e-mail largo com um título sobre um fundo calmo de um só matiz

O mesmo visual levado a um cabeçalho de e-mail.

A única coisa que falta a uma identidade monocromática é um destaque óbvio. Se os seus designs precisam que um botão ou um preço salte aos olhos, permita uma cor de fora do matiz e use-a raramente. Isso leva você a uma [paleta análoga](https://gradiently.design/pt-br/guide/analogous-colors) ou a um monocromático com destaque, ambos perfeitamente bons.

## Gradientes monocromáticos

Gradientes de um só matiz estão entre os mais elegantes que você pode criar: sugerem a luz caindo sobre um único material. Nunca ficam barrentos, porque não há um segundo matiz para brigar.

- Azul da meia-noite: `linear-gradient(180deg, #0b1437 0%, #1e3a8a 55%, #3b82f6 100%)`
- Rosa: `linear-gradient(135deg, #4c0519 0%, #be123c 50%, #fda4af 100%)`
- Sálvia: `linear-gradient(160deg, #1f2e24 0%, #4b6b55 55%, #c9dbc8 100%)`
- Areia: `linear-gradient(135deg, #5c4630 0%, #b08d63 55%, #efe3cf 100%)`
- Brilho violeta: `radial-gradient(circle at 30% 30%, #c4b5fd 0%, #7c3aed 40%, #2e1065 100%)`
- Grafite (sem matiz nenhum): `linear-gradient(180deg, #0a0a0a 0%, #262626 60%, #525252 100%)`

Seis gradientes de um só matiz. Cada um se move só na luminosidade e um pouco na saturação.

> **Cuidado com o banding** Como um gradiente monocromático muda devagar, ele tem menos níveis de cor para espalhar pela tela e está sujeito a faixas visíveis, sobretudo em azuis e cinzas escuros. Uma camada fina de grão resolve; veja [banding em gradientes](https://gradiently.design/pt-br/guide/gradient-banding).

## FAQ

### O que é um esquema de cores monocromático?

Um esquema de cores monocromático usa um único matiz numa faixa de tintas, sombras e tons, do muito claro ao muito escuro.

### Qual é a diferença entre tinta, sombra e tom?

Uma tinta é um matiz misturado com branco, uma sombra é misturada com preto e um tom é misturado com cinza.

### Preto e branco é um esquema monocromático?

A rigor, preto, branco e cinza são acromáticos, ou seja, não têm matiz. No dia a dia as pessoas costumam chamá-los de monocromáticos, e eles seguem os mesmos princípios.

### Quantas cores uma paleta monocromática deve ter?

De nove a onze passos, do quase branco ao quase preto, dão amplitude suficiente para fundos, textos, bordas e cor da marca.

### Uma marca pode usar só uma cor?

Pode, se a paleta tiver toda a faixa de luminosidade e cada passo tiver uma função clara. Muitas marcas de uma cor só acrescentam um pequeno destaque para as chamadas para ação.