# Tints, tones e shades: como construir uma escala de cores

[Canonical HTML page](https://gradiently.design/pt-pt/guide/tints-tones-shades)

Uma só cor de marca nunca chega para desenhar. Tints, tones e shades transformam-na numa família inteira, e uma boa escala é o que deixa uma paleta suportar texto, botões, fundos e gráficos.

## The short version

- Tints, tones e shades são três formas de variar uma cor: um tint junta branco, um tone junta cinzento e um shade junta preto.
- Os tints parecem mais leves e suaves, os tones mais calmos e apagados e os shades mais profundos e sérios.
- Uma escala de cores é uma fila de tints e shades de um só matiz, geralmente numerada de 50 ou 100 para o mais claro até 900 para o mais escuro.
- Misturar num espaço de cor percetivo como o OKLCH mantém os passos de uma escala com aspeto uniformemente espaçado.
- Uma boa escala dá a cada passo uma função, como fundos, contornos, texto e estados de hover, e verifica o contraste entre os passos que vão encontrar-se.

**Tints, tones e shades** são as três formas de mudar uma cor sem mudar o seu matiz. Um **tint** é a cor misturada com branco, por isso fica mais clara e suave. Um **shade** é a cor misturada com preto, por isso fica mais profunda. Um **tone** é a cor misturada com cinzento, por isso fica mais calma e apagada. Pensa em tints, tones e shades como branco, cinzento e preto juntados a um só matiz. Põe uma sequência de tints e shades por ordem e tens uma escala de cores: a ferramenta que transforma uma só cor de marca em algo com que podes mesmo desenhar.

## Tint, tone e shade, lado a lado

A maneira mais fácil de ver a diferença é partir de uma cor e empurrá-la de três formas. Aqui a base é um violeta, `#7c3aed`, misturado em passos de 20 por cento.

| Tipo | Misturado com | Efeito | Exemplo a partir de #7c3aed |
| --- | --- | --- | --- |
| Tint | Branco | Mais leve, mais suave, mais arejado | `#b089f4` com 40 por cento de branco |
| Tone | Cinzento | Apagado, mais calmo, mais natural | `#7e64ac` com 60 por cento de cinzento |
| Shade | Preto | Mais profundo, mais pesado, mais sério | `#4a238e` com 40 por cento de preto |

O matiz continua violeta em todos os casos. Só mudam a luminosidade e a saturação.

- Tint 90%: #f2ebfd
- Tint 60%: #cbb0f8
- Tint 20%: #9661f1
- Violeta base: #7c3aed
- Shade 20%: #632ebe
- Shade 60%: #32175f
- Shade 80%: #190c2f

Tints à esquerda, shades à direita. Esta fila já é quase toda uma escala utilizável.

- Violeta base: #7c3aed
- Tone 20%: #7d48d7
- Tone 40%: #7e56c1
- Tone 60%: #7e64ac
- Tone 80%: #7f7296

Os tones mantêm mais ou menos a mesma luminosidade e drenam cor em vez disso, e é por isso que as paletas feitas de tones parecem calmas e adultas.

## O que tints, tones e shades fazem a um design

Cada direção muda o ambiente tanto como a cor. Os tints leem-se como delicados, jovens e abertos, e é por isso que as [paletas de cores pastel](https://gradiently.design/pt-pt/guide/pastel-color-palettes) são sobretudo tints. Os shades leem-se como ricos, sérios e premium, o território das [paletas de cores escuras](https://gradiently.design/pt-pt/guide/dark-color-palettes). Os tones leem-se como adultos e naturais, a base de quase todas as [paletas de cores apagadas](https://gradiently.design/pt-pt/guide/muted-color-palettes).

- Tints: suaves e abertos: `linear-gradient(135deg, #f2ebfd 0%, #cbb0f8 60%, #9661f1 100%)`
- Tones: calmos e adultos: `linear-gradient(135deg, #b5a8cb 0%, #7e64ac 60%, #5f5079 100%)`
- Shades: profundos e sérios: `linear-gradient(135deg, #632ebe 0%, #32175f 60%, #190c2f 100%)`

O mesmo violeta empurrado de três formas. Os tints elevam o ambiente, os tones acalmam-no e os shades dão-lhe peso.

## Como construir uma escala de cores a partir de um hex

A maioria dos sistemas de design numera a escala de 50 ou 100 (mais claro) a 900 (mais escuro), com a cor de marca algures perto de 500. A coerência importa mais do que os números: toda a cor do teu sistema deve ter os mesmos passos, para que `200` signifique sempre um fundo claro e `700` signifique sempre texto. Cinco passos bem escolhidos valem mais do que onze que ninguém distingue, e podes juntar os passos intermédios quando os designs reais mostrarem onde fazem falta.

1. **Coloca a tua cor de marca** Decide a que passo pertence. Uma cor média como `#7c3aed` fica em 500; um azul-marinho de marca muito escuro pode ficar em 800.
2. **Faz a ponta clara** Mistura para o branco de 400 até 50. O passo mais claro deve ter quase nenhuma cor, claro o bastante para um fundo de página.
3. **Faz a ponta escura** Mistura para o preto de 600 até 900. O passo mais escuro deve ser escuro o bastante para texto corrido sobre o mais claro.
4. **Uniformiza os passos** Olha para a fila à distância. Se dois vizinhos parecem quase iguais e outro intervalo parece um salto, ajusta-os a olho.
5. **Desloca ligeiramente o matiz nas pontas** O preto puro pode fazer os shades parecerem sujos. Muitos designers empurram os passos escuros uns graus para o azul ou violeta e os claros para o quente.
6. **Verifica os pares que vão encontrar-se** Testa os passos de texto sobre os passos de fundo quanto ao contraste, usando [contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) como guia.

| Passo | Hex | Função típica |
| --- | --- | --- |
| 50 | `#f2ebfd` | Fundo de página ou cartão |
| 100 | `#e5d8fb` | Preenchimentos subtis, linhas selecionadas |
| 200 | `#cbb0f8` | Contornos, divisórias, estados desativados |
| 400 | `#9661f1` | Ícones, formas decorativas grandes |
| 500 | `#7c3aed` | Cor de marca, botões principais |
| 600 | `#632ebe` | Hover de botão, ligações |
| 700 | `#4a238e` | Títulos sobre fundos claros |
| 800 | `#32175f` | Texto corrido sobre tints |
| 900 | `#190c2f` | Fundo do modo escuro |

Uma escala de violeta com uma função para cada passo. O branco sobre 500 dá cerca de 5,7:1 e o passo 800 sobre o passo 100 cerca de 10,9:1, ambos acima da diretriz de 4,5:1.

## Fazer tints e shades em CSS

Já não precisas de calcular cada passo à mão. O `color-mix()` do CSS mistura duas cores num espaço de cor escolhido, por isso uma escala inteira pode seguir uma só variável. Misturar em OKLCH mantém os passos mais uniformes à vista do que o sRGB simples, um ponto tratado em [OKLCH explicado](https://gradiently.design/pt-pt/guide/oklch-explained). O suporte dos navegadores é amplo; vê [color-mix() na MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) para os pormenores.

```css
:root {
  --brand: #7c3aed;

  /* Tints: mix with white */
  --brand-100: color-mix(in oklch, var(--brand) 20%, white);
  --brand-300: color-mix(in oklch, var(--brand) 60%, white);

  /* Shades: mix with black */
  --brand-700: color-mix(in oklch, var(--brand) 60%, black);
  --brand-900: color-mix(in oklch, var(--brand) 25%, black);

  /* Tone: mix with grey */
  --brand-muted: color-mix(in oklch, var(--brand) 50%, grey);
}
```

Muda `--brand` e todos os tints, shades e tones se atualizam com ele.

## Tints e shades em gradientes

Os gradientes mais limpos são muitas vezes só um matiz a passar de tint para shade. Como nada cruza o círculo cromático, não há faixa cinzenta no meio, e o resultado lê-se como luz a cair num só material. Os [esquemas de cores monocromáticos](https://gradiently.design/pt-pt/guide/monochromatic-color-scheme) usam a mesma ideia para paletas inteiras.

- Violeta, de tint a shade: `linear-gradient(160deg, #f2ebfd 0%, #9661f1 50%, #32175f 100%)`
- Violeta, iluminado por cima: `radial-gradient(circle at 30% 25%, #cbb0f8 0%, #7c3aed 45%, #190c2f 100%)`
- Terracota, de tint a shade: `linear-gradient(135deg, #fae8e1 0%, #e0663a 55%, #5a2917 100%)`
- Tint lilás a tone violeta: `linear-gradient(135deg, #e5d8fb 0%, #7f7296 100%)`

Misturas de um só matiz. Cada uma só vai buscar à sua própria escala.

Um Mark do Gradiently funciona de forma parecida: uma receita de cores relacionadas com luz a atravessá-la. Quando desenhas sobre um, as cores junto às tuas palavras escurecem ou clareiam para o texto se manter legível sem uma caixa por trás.

## FAQ

### Qual é a diferença entre um tint, um tone e um shade?

Um tint é uma cor misturada com branco, um tone é uma cor misturada com cinzento e um shade é uma cor misturada com preto.

### Um pastel é um tint?

Sim. Os pastéis são tints: cores clareadas com muito branco, o que as torna suaves e de baixa intensidade.

### Quantos passos deve ter uma escala de cores?

A maioria dos sistemas de design usa nove a onze passos, numerados de 50 ou 100 a 900. Menos passos podem servir em projetos pequenos, desde que cada um tenha uma função clara.

### Como faço um shade mais escuro de uma cor em CSS?

Usa `color-mix(in oklch, yourcolour 70%, black)` e ajusta a percentagem. Percentagens mais baixas dão shades mais escuros.

### Porque é que os meus shades parecem lamacentos?

Misturar com preto puro também drena saturação. Mistura em OKLCH e tenta empurrar os passos mais escuros ligeiramente para o azul ou violeta para os manter ricos.