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

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

Um só matiz parece limitador até veres quanta amplitude cabe nele. Bem construída, uma única cor pode cobrir fundos, texto, botões e gradientes, e parecer mais distinta do que um arco-íris.

## The short version

- Um esquema de cores monocromático usa um único matiz numa gama de luminosidade e saturação, construída a partir de claros, escuros e tons.
- Um claro é um matiz misturado com branco, um escuro é um matiz misturado com preto e um tom é um matiz misturado com cinzento.
- Uma escala monocromática útil tem cerca de nove ou dez degraus, do quase branco ao quase preto, espaçados por igual na luminosidade percebida.
- Deslocar ligeiramente o matiz nas pontas clara e escura evita que uma paleta monocromática pareça sem vida.
- As paletas monocromáticas dão gradientes calmos e coesos, mas as misturas lentas de um só matiz criam faixas com facilidade e beneficiam de grão fino.

Um **esquema de cores monocromático** usa um matiz e mais nada, variado em luminosidade e saturação. Pensa em azul-marinho, cobalto, azul-céu e gelo: todos azuis, todos claramente aparentados, e com contraste suficiente entre eles para fundos, texto e realces. Como todas as cores partilham o mesmo matiz, uma paleta monocromática parece sempre unificada. O trabalho está em construir amplitude suficiente dentro desse único matiz.

Este guia trata das três formas de variar um matiz, de como construir uma escala com que se consiga mesmo desenhar e de como o monocromático funciona nos gradientes. Para o contexto mais amplo, vê [noções básicas de teoria da cor](https://gradiently.design/pt-pt/guide/color-theory-basics).

## Claros, escuros e tons

Cada cor de uma paleta monocromática nasce de um de três movimentos. Um **claro** acrescenta branco, tornando a cor mais leve e suave. Um **escuro** acrescenta preto, tornando-a mais profunda. Um **tom** acrescenta cinzento, tornando-a mais discreta sem mudar muito a sua luminosidade.

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

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

## Como construir uma paleta monocromática

Uma mão-cheia de claros ao acaso não é uma paleta. O que queres é uma escala: uma sequência de degraus do quase branco ao quase preto, espaçados por igual para que cada degrau pareça tão diferente do vizinho como o anterior. Nove a onze degraus é um tamanho comum, e é o que a maioria dos sistemas de design usa.

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

Uma escala de azul-petróleo com dez degraus. Degraus claros para fundos, degraus do meio para a cor, degraus escuros para o texto.

1. **Escolhe o matiz central** Escolhe a versão da cor de que mais gostas com intensidade máxima. Torna-se o meio da escala.
2. **Define as pontas** Escolhe um quase branco com um toque do matiz e um quase preto com um toque do matiz. Evita o branco e o preto puros; parecem desligados.
3. **Preenche os degraus pela luminosidade** Espaça os degraus pela luminosidade que aparentam, não por valores iguais de hex ou HSL. Espaços percetuais como o OKLCH facilitam isto; vê [gradientes OKLCH](https://gradiently.design/pt-pt/guide/css-gradient-oklch).
4. **Baixa a saturação nas pontas** Os degraus muito claros e muito escuros ficam melhor ligeiramente esbatidos. Saturação máxima nos extremos parece berrante ou turva.
5. **Desloca um pouco o matiz** Deixa a ponta clara derivar ligeiramente para o quente ou o frio e a ponta escura para o lado oposto. Dá vida sem quebrar o esquema.

### Porque é que uma ligeira deslocação do matiz ajuda

Os objetos reais raramente escurecem só por lhes juntarmos preto: as sombras apanham luz mais fria ou mais quente do que as rodeia. Uma escala que só mistura preto e branco parece plana em comparação. Deslocar o matiz alguns graus ao longo da escala é prática corrente na ilustração e nos sistemas de design.

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

Duas escalas de azul com cinco degraus à volta do mesmo centro, `#2563eb`. A segunda deriva para o azul-céu na ponta clara e para o índigo na escura, por isso parece iluminada e não misturada.

## Uma identidade inteira com um só matiz

Uma marca monocromática pode ser surpreendentemente distinta, porque é disciplinada de uma forma que a maioria das marcas não é. O truque é dar a cada degrau da escala uma função e cumpri-la.

| Degrau da escala | Função |
| --- | --- |
| 50 a 100 | Fundos de página e de cartões |
| 200 a 300 | Contornos, divisórias, preenchimentos discretos |
| 400 a 600 | Cor da marca, botões, ilustração |
| 700 a 800 | Títulos, ligações, preenchimentos fortes |
| 900 e mais escuros | Texto corrido, fundos em modo escuro |

Funções para uma escala monocromática. O texto e o fundo vêm de pontas opostas, que é onde vive o contraste.

Junta sempre o texto e o fundo a partir de pontas opostas da escala. Dois degraus do meio ficam lindos como amostras e falham como texto; verifica com as orientações de [contraste de cor](https://gradiently.design/pt-pt/guide/color-contrast-accessibility). Regista a escala, com a função de cada degrau, no teu [kit de marca](https://gradiently.design/pt-pt/guide/brand-kit) para que todos usem os mesmos valores.

Uma publicação editorial vertical com um 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 email largo com um título sobre um fundo calmo de um só matiz

O mesmo visual levado para um cabeçalho de email.

A única coisa que falta a uma identidade monocromática é um acento evidente. Se os teus designs precisam que um botão ou um preço salte à vista, permite uma cor de fora do matiz e usa-a raramente. Isso leva-te para uma [paleta análoga](https://gradiently.design/pt-pt/guide/analogous-colors) ou para um monocromático com acento, ambos perfeitamente válidos.

## Gradientes monocromáticos

Os gradientes de um só matiz estão entre os mais elegantes que se podem fazer: sugerem luz a cair sobre um único material. Nunca ficam turvos, porque não há um segundo matiz com que lutar.

- Azul meia-noite: `linear-gradient(180deg, #0b1437 0%, #1e3a8a 55%, #3b82f6 100%)`
- Rosa: `linear-gradient(135deg, #4c0519 0%, #be123c 50%, #fda4af 100%)`
- Salva: `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 muda apenas em luminosidade e um pouco em saturação.

> **Atenção às faixas** Como um gradiente monocromático muda devagar, tem menos níveis de cor para espalhar pelo ecrã e tende a mostrar riscas visíveis, sobretudo em azuis escuros e cinzentos. Uma camada fina de grão resolve; vê [faixas em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding).

## FAQ

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

Um esquema de cores monocromático usa um único matiz numa gama de claros, escuros e tons, do muito claro ao muito escuro.

### Qual é a diferença entre um claro, um escuro e um tom?

Um claro é um matiz misturado com branco, um escuro é misturado com preto e um tom é misturado com cinzento.

### O preto e branco é um esquema monocromático?

Em rigor, o preto, o branco e o cinzento são acromáticos, ou seja, não têm matiz. No uso comum, as pessoas chamam-lhes muitas vezes monocromáticos, e seguem os mesmos princípios.

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

Cerca de nove a onze degraus do quase branco ao quase preto dão amplitude suficiente para fundos, texto, contornos e cor da marca.

### Uma marca pode usar apenas uma cor?

Sim, se a paleta tiver uma gama completa de luminosidade e cada degrau tiver uma função clara. Muitas marcas de uma só cor acrescentam um pequeno acento para os apelos à ação.