# Escala de cores OKLCH

> Gere os tons de 50 a 950 a partir de uma cor, com luminosidade uniforme em OKLCH, o contraste de cada tom e as custom properties prontas.

URL: https://dpw.dev/ferramentas/escala-de-cores-oklch/

Escolha a cor base: a ferramenta gera os tons de 50 a 950 com luminosidade uniforme em OKLCH, mostra o contraste de cada um e entrega as custom properties.

Esta página tem um gerador interativo no navegador. Exemplo: a escala de `#2563eb`, com o tom 50 em 97% de luminosidade e o 950 em 26%:

```css
:root {
  --blue-50: oklch(96.84% 0.0153 252.61);
  --blue-100: oklch(89.94% 0.0373 262.88);
  --blue-200: oklch(82.87% 0.0631 262.88);
  --blue-300: oklch(75.81% 0.0949 262.88);
  --blue-400: oklch(68.74% 0.1313 262.88);
  --blue-500: oklch(61.68% 0.1716 262.88);
  --blue-600: oklch(54.61% 0.2152 262.88);
  --blue-700: oklch(47.46% 0.1946 262.88);
  --blue-800: oklch(40.31% 0.1645 262.88);
  --blue-900: oklch(33.15% 0.1293 262.88);
  --blue-950: oklch(26% 0.0904 262.88);
}
```

| Tom | Hex | Texto com mais contraste |
| :-- | :-- | :-- |
| 50 | `#eef6ff` | Preto, 19,2:1 |
| 100 | `#d1def7` | Preto, 15,5:1 |
| 200 | `#b1c8f1` | Preto, 12,4:1 |
| 300 | `#91b1ed` | Preto, 9,7:1 |
| 400 | `#6f99ec` | Preto, 7,4:1 |
| 500 | `#4b80eb` | Preto, 5,6:1 |
| 600 (base) | `#2563eb` | Branco, 5,2:1 |
| 700 | `#194fc7` | Branco, 7:1 |
| 800 | `#123e9f` | Branco, 9,4:1 |
| 900 | `#0e2f77` | Branco, 12,5:1 |
| 950 | `#0b204f` | Branco, 15,7:1 |

## O problema

Montar a escala de uma cor, do fundo quase branco ao texto quase preto, costumava ser no olho. Clarear e escurecer em HSL muda a claridade percebida de um jeito diferente em cada matiz: com o mesmo L, o amarelo parece muito mais claro que o azul, e a escala sai torta.

O defeito aparece no contraste. O tom 600 de uma cor passa no AA com texto branco, o 600 de outra não, e cada componente precisa de um ajuste à mão.

## Como funciona

Em OKLCH, a luminosidade (L) acompanha a percepção. A escala mantém o matiz (H) da cor base e distribui L em passos iguais entre a ponta clara e a escura:

`oklch(L C H): L em passos iguais, H fixo`

A cor base entra sem alteração no tom de luminosidade mais próxima; os tons acima dividem o caminho até a ponta clara, e os de baixo, até a escura.

O croma (C) diminui em direção às pontas. Tons quase brancos com o croma da base parecem neon, e quase pretos parecem tinta; escalas feitas à mão também fazem isso. Quando um tom ainda não cabe no sRGB, o croma cai mais um pouco pelo mapeamento de gamut do CSS Color 4.

Cada tom mostra o texto, branco ou preto, que mais contrasta com ele, e a razão do WCAG 2. Isso ajuda a escolher os pares de fundo e texto dos componentes.

## Quando usar

- Tokens de cor de um design system: fundos, bordas, textos e estados a partir da cor da marca.
- Variações de hover, foco e seleção que mantêm o mesmo matiz.
- Tema escuro, invertendo a escala: o 900 vira fundo e o 100 vira texto.
- Trocar os `lighten()` e `darken()` do Sass por valores fixos e previsíveis.

Suporte: funciona em todos os navegadores atuais ([Baseline](https://webstatus.dev/features/oklab)).

## Leia no blog

- [Substituindo funções de cor do Sass por CSS nativo](https://dpw.dev/css/substituindo-funcoes-de-cor-sass-por-css-nativo/)

## Conceitos Fundamentais de CSS

Custom properties, herança e valores computados explicam por que um token de cor se espalha pelo site inteiro. O livro mostra esse modelo em 237 páginas sobre como o CSS funciona por dentro. [Conheça o livro](https://dpw.dev/livro-conceitos-fundamentais-css/?utm_source=blog&utm_medium=cta_ferramentas)

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml