# Tints, tons e shades: como montar uma escala de cores

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

Uma única cor de marca nunca basta para criar. Tints, tons e shades a transformam numa família inteira, e uma boa escala é o que permite a uma paleta sustentar texto, botões, fundos e gráficos.

## The short version

- Tints, tons e shades são três jeitos de variar uma cor: o tint acrescenta branco, o tom acrescenta cinza e o shade acrescenta preto.
- Tints parecem mais leves e suaves, tons parecem mais calmos e sóbrios, e shades parecem mais profundos e sérios.
- Uma escala de cores é uma fileira de tints e shades de um matiz, em geral numerada de 50 ou 100 para o mais claro até 900 para o mais escuro.
- Misturar num espaço de cor perceptivo como o OKLCH mantém os degraus da escala com espaçamento visual uniforme.
- Uma boa escala dá uma função a cada degrau, como fundos, bordas, texto e estados de hover, e verifica o contraste entre os degraus que vão se encontrar.

**Tints, tons e shades** são as três formas de mudar uma cor sem mudar o matiz. O **tint** é a cor misturada com branco, então fica mais clara e suave. O **shade** é a cor misturada com preto, então fica mais profunda. O **tom** é a cor misturada com cinza, então fica mais quieta e sóbria. Pense em tints, tons e shades como branco, cinza e preto acrescentados a um matiz. Ponha em ordem uma sequência de tints e shades e você tem uma escala de cores: a ferramenta que transforma uma única cor de marca em algo com que se pode realmente criar.

## Tint, tom e shade, lado a lado

O jeito mais fácil de ver a diferença é partir de uma cor e empurrá-la em três direções. 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 |
| Tom | Cinza | Sóbrio, mais calmo, mais natural | `#7e64ac` com 60 por cento de cinza |
| 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 fileira já é quase toda uma escala usável.

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

Tons mantêm mais ou menos a mesma luminosidade e drenam a cor, e é por isso que paletas de tons parecem calmas e adultas.

## O que tints, tons e shades fazem num design

Cada direção muda o clima tanto quanto a cor. Tints parecem gentis, jovens e abertos, e por isso as [paletas de cores pastel](https://gradiently.design/pt-br/guide/pastel-color-palettes) são quase só tints. Shades parecem ricos, sérios e premium, território das [paletas de cores escuras](https://gradiently.design/pt-br/guide/dark-color-palettes). Tons parecem adultos e naturais, a base de quase toda [paleta de cores suaves](https://gradiently.design/pt-br/guide/muted-color-palettes).

- Tints: suaves e abertos: `linear-gradient(135deg, #f2ebfd 0%, #cbb0f8 60%, #9661f1 100%)`
- Tons: 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 em três direções. Tints elevam o clima, tons o aquietam e shades lhe dão peso.

## Como montar 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 da marca perto do 500. A consistência importa mais que os números: toda cor do seu sistema deve ter os mesmos degraus, para que `200` sempre signifique um fundo claro e `700` sempre signifique texto. Cinco degraus bem escolhidos valem mais que onze que ninguém distingue, e você pode acrescentar os intermediários quando designs reais mostrarem onde fazem falta.

1. **Posicione a cor da marca** Decida a qual degrau ela pertence. Uma cor média como `#7c3aed` fica em 500; um azul-marinho de marca bem escuro poderia ficar em 800.
2. **Faça a ponta clara** Misture em direção ao branco de 400 até 50. O degrau mais claro deve mal ter cor, claro o bastante para ser fundo de página.
3. **Faça a ponta escura** Misture em direção ao preto de 600 até 900. O degrau mais escuro deve ser escuro o bastante para texto corrido sobre o mais claro.
4. **Uniformize os degraus** Olhe a fileira de longe. Se dois vizinhos parecem quase idênticos e outro intervalo parece um salto, ajuste a olho.
5. **Desloque um pouco o matiz nas pontas** O preto puro pode deixar os shades sujos. Muitos designers empurram os degraus escuros alguns graus para o azul ou violeta e os claros para o quente.
6. **Confira os pares que vão se encontrar** Teste os degraus de texto sobre os degraus de fundo para contraste, usando [contraste de cor e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility) como guia.

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

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

## Faça tints e shades em CSS

Você não precisa mais calcular cada degrau à mão. O `color-mix()` do CSS mistura duas cores num espaço de cor escolhido, então uma escala inteira pode seguir uma só variável. Misturar em OKLCH deixa os degraus mais uniformes ao olho do que o sRGB puro, ponto tratado em [OKLCH explicado](https://gradiently.design/pt-br/guide/oklch-explained). O suporte dos navegadores é amplo; veja [color-mix() na MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix) para detalhes.

```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);
}
```

Mude `--brand` e todo tint, shade e tom é atualizado junto.

## Tints e shades em gradientes

Os gradientes mais limpos costumam ser só um matiz indo de tint a shade. Como nada cruza o círculo cromático, não há faixa cinza no meio, e o resultado parece luz caindo sobre um único material. [Esquemas de cores monocromáticos](https://gradiently.design/pt-br/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 de 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 tom violeta: `linear-gradient(135deg, #e5d8fb 0%, #7f7296 100%)`

Misturas de um só matiz. Cada uma toma emprestado só da própria escala.

Um Mark do Gradiently funciona de modo parecido: uma receita de cores relacionadas com a luz passando por elas. Quando você cria sobre um, as cores perto das palavras escurecem ou clareiam para o texto continuar legível sem uma caixa atrás.

## FAQ

### Qual a diferença entre tint, tom e shade?

Um tint é uma cor misturada com branco, um tom é uma cor misturada com cinza e um shade é uma cor misturada com preto.

### Pastel é um tint?

É. Pastéis são tints: cores clareadas com muito branco, o que as deixa suaves e de baixa intensidade.

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

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

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

Use `color-mix(in oklch, suacor 70%, black)` e ajuste a porcentagem. Porcentagens menores dão shades mais escuros.

### Por que meus shades parecem enlameados?

Misturar com preto puro também drena a saturação. Misture em OKLCH e tente empurrar os degraus mais escuros um pouco para o azul ou violeta para mantê-los ricos.