# OKLCH explicado: cor perceptiva para designers

[Canonical HTML page](https://gradiently.design/pt-br/guide/oklch-explained)

O HSL prometeu uma cor legível e quase entregou. O OKLCH mantém a parte legível e corrige a mentira sobre a luminosidade, e é por isso que os design systems estão migrando para ele.

## The short version

- O OKLCH descreve uma cor com três valores: luminosidade perceptiva (L), croma ou intensidade de cor (C) e ângulo de matiz (H).
- Ao contrário do HSL, a luminosidade do OKLCH corresponde ao brilho que as pessoas percebem, então duas cores com o mesmo L têm contraste parecido contra o branco.
- Em CSS ele se escreve `oklch(60% 0.2 293)`, com alfa opcional depois de uma barra, e todos os principais navegadores atuais o suportam.
- O croma não tem máximo fixo: a quantidade de cor possível depende da luminosidade, do matiz e da tela, e as cores além do alcance da tela são trazidas de volta para dentro dele.
- Interpolar degradês em OKLCH ou OKLab evita o meio cinza e barrento que as misturas em sRGB produzem entre matizes distantes.

O **OKLCH** é uma forma de escrever a cor como luminosidade, croma e matiz, em que a luminosidade é medida como os olhos humanos a percebem. Em CSS, `oklch(60% 0.2 293)` é um violeta que parece estar a 60% do caminho entre o preto e o branco, com cor forte, num ângulo de matiz de 293 graus. O ganho prático para designers é simples: mude o matiz e mantenha o L, e a nova cor parece igualmente clara. O HSL não consegue prometer isso, e esse é o motivo de o OKLCH ter virado o padrão em design systems mais novos, incluindo a paleta de cores do Tailwind.

## Luminosidade, croma e matiz

| Letra | Nome | Faixa | O que controla |
| --- | --- | --- | --- |
| L | Luminosidade | 0% a 100% (ou 0 a 1) | Quão clara a cor parece, como os olhos julgam |
| C | Croma | De 0 para cima, raramente acima de 0,37 | Quanta cor: 0 é cinza, quanto maior mais vívida |
| H | Matiz | 0 a 360 graus | Qual cor: aproximadamente 30 vermelho, 110 amarelo, 140 verde, 265 azul |
| / A | Alfa | 0 to 1, or 0% to 100% | Opacidade, opcional |

Os ângulos de matiz no OKLCH não coincidem com os do HSL. O azul puro fica perto de 264 aqui, não 240.

A **luminosidade** é a estrela. Ela vem do OKLab, um espaço de cor publicado em 2020 e criado para prever luminosidade, intensidade de cor e matiz percebidos de forma mais uniforme que os modelos antigos. O **croma** substitui a saturação: em vez de uma porcentagem de algum máximo, é uma quantidade absoluta de cor, então um croma de 0,1 significa a mesma intensidade visual em qualquer matiz. O **matiz** continua sendo um ângulo, mas os ângulos são espaçados para que um passo de 30 graus pareça uma mudança semelhante ao longo de toda a roda.

## OKLCH vs HSL: a mesma luminosidade, lado a lado

Tome seis matizes e fixe a luminosidade e o croma em `oklch(65% 0.11 H)`. As amostras abaixo parecem uma só família, e o contraste delas contra o branco fica entre 3,1:1 e 3,4:1. Faça o mesmo no [HSL](https://gradiently.design/pt-br/guide/hsl-colors) com 50% de luminosidade e o contraste contra o branco oscila de cerca de 1,07:1 para o amarelo a 8,6:1 para o azul.

- H 30 #c97466: #c97466
- H 90 #a98c35: #a98c35
- H 150 #5aa26b: #5aa26b
- H 210 #11a1b4: #11a1b4
- H 270 #758bd3: #758bd3
- H 330 #b576af: #b576af

`oklch(65% 0.11 H)` em seis matizes. Mesma luminosidade, mesmo croma, e elas realmente parecem iguais.

Essa uniformidade é o que torna o OKLCH útil no trabalho real. Um conjunto de cores de status, séries de gráfico ou etiquetas de categoria pode compartilhar um mesmo L e C e diferir só no matiz, e nenhuma grita mais alto que as outras. Se você precisar de um conjunto seguro para daltonismo, varia também o L, o que é tratado em [paletas amigáveis para daltônicos](https://gradiently.design/pt-br/guide/color-blindness-design).

## Como escrever OKLCH em CSS

```css
:root {
  /* lightness as a percentage or a number */
  --violet: oklch(60% 0.2 293);
  --violet-same: oklch(0.6 0.2 293);

  /* with transparency */
  --violet-soft: oklch(60% 0.2 293 / 0.4);

  /* grey: chroma 0, hue ignored */
  --grey: oklch(60% 0 0);
}

/* a fallback for very old browsers comes first */
.button {
  background: #8860ea;
  background: oklch(60% 0.2 293);
}
```

`oklch(60% 0.2 293)` é próximo de #8860ea em sRGB. As versões atuais do Chrome, Edge, Firefox e Safari suportam oklch().

O suporte dos navegadores é amplo, e você pode conferir o detalhe no [caniuse](https://caniuse.com/mdn-css_types_color_oklch). Para explorar valores visualmente, o [oklch.com](https://oklch.com) é um seletor que mostra quais combinações uma tela comum consegue exibir. Para converter um hex de marca existente, cole-o nesse seletor ou no painel de cores das devtools do navegador, que pode mostrar qualquer cor em OKLCH.

## Montando uma escala com OKLCH

Para criar uma escala de tons claros e escuros, aumente a luminosidade em passos iguais e deixe o croma subir em direção ao meio e cair nas pontas. Cores muito claras e muito escuras fisicamente não comportam muita cor, então, se você mantém o croma alto nos extremos, o navegador precisa cortá-las. Aqui está uma escala de violeta construída assim.

- L 97 C .015: #f5f3ff
- L 90 C .05: #dfd9fd
- L 80 C .10: #c0b2f9
- L 70 C .17: #a486fd
- L 60 C .22: #8a5af4
- L 50 C .22: #6e37d2
- L 40 C .18: #50249d
- L 30 C .12: #331b63
- L 20 C .07: #180d32

Matiz 293 em toda a escala. Cada passo é um salto visual parecido, o que as escalas em HSL raramente conseguem.

Como o L acompanha a luminosidade percebida, você pode tomar decisões aproximadas de contraste só pelos números. Nesta escala, texto branco passa em 4,5:1 do L 50 para baixo, e texto preto passa do L 60 para cima. Confirme sempre com um [verificador de contraste](https://gradiently.design/pt-br/guide/color-contrast-accessibility), mas raramente você terá surpresas. Transformar uma escala assim em tokens nomeados é assunto de [design tokens](https://gradiently.design/pt-br/guide/design-tokens).

## Gamut: quando uma cor não existe na tela

O OKLCH pode descrever cores que nenhuma tela consegue mostrar. A maioria dos monitores exibe sRGB; muitos celulares e notebooks recentes exibem o Display P3, mais amplo. Aumente o croma o bastante e você sai dos dois. Quando isso acontece, o navegador traz a cor de volta para a mais próxima que a tela consegue mostrar, então nada quebra, mas você pode não obter o que digitou.

### Evite

- Croma alto em L muito claro ou muito escuro
- Copiar valores P3 para um guia de marca feito para impressão
- Presumir que uma cor OKLCH vívida parece igual em todas as telas
- Usar croma acima de cerca de 0,2 em áreas grandes de fundo

### Do

- Confira os valores num seletor que marque a borda do sRGB
- Mantenha um hex de reserva para as cores da marca
- Reduza o croma em direção às pontas de uma escala
- Guarde as cores mais vívidas para pequenos acentos

## Degradês em OKLCH

Os degradês são onde a cor perceptiva mais compensa de forma visível. Um degradê CSS comum mistura em sRGB, que afunda no cinza entre matizes distantes. O CSS moderno deixa você escolher o espaço em que misturar, e OKLab ou OKLCH mantêm o meio brilhante e limpo.

- Misturado em sRGB: meio cinza: `linear-gradient(90deg in srgb, #2563eb, #facc15)`
- Misturado em OKLab: limpo: `linear-gradient(90deg in oklab, #2563eb, #facc15)`
- Misturado em OKLCH: passando pelo verde: `linear-gradient(90deg in oklch, #2563eb, #facc15)`

As mesmas duas cores de três maneiras. O OKLCH percorre a roda de matizes, então pode passar por matizes que nenhuma das pontas contém.

O OKLab mistura em linha reta e serve para a maioria dos degradês de duas cores. O OKLCH gira o matiz, o que é lindo para pores do sol e arco-íris, mas pode surpreender. A técnica completa, incluindo as palavras-chave `shorter hue` e `longer hue`, está em [degradês CSS em OKLCH](https://gradiently.design/pt-br/guide/css-gradient-oklch), e a teoria por trás, em [interpolação de degradês](https://gradiently.design/pt-br/guide/gradient-interpolation).

Os Marks do Gradiently são renderizados ao vivo em vez de escritos como CSS, e cada um traz a própria paleta: a tinta automática escolhe texto claro ou escuro a partir dessa paleta para cada linha, então as palavras se leem sem que você confira números. Se você prefere começar por um fundo vivo pronto em vez de um valor num seletor, navegue pelo Mercado por palavras de cor.

## FAQ

### O que é OKLCH?

O OKLCH é um formato de cor baseado no espaço de cor OKLab. Descreve as cores por luminosidade perceptiva, croma e matiz, então valores iguais parecem igualmente claros e vívidos.

### O OKLCH é melhor que o HSL?

Para montar paletas, escalas e degradês, sim, porque sua luminosidade corresponde ao que os olhos veem. O HSL continua bom para ajustes rápidos à mão.

### Posso usar oklch() em CSS hoje?

Sim. As versões atuais do Chrome, Edge, Firefox e Safari o suportam. Coloque um hex de reserva antes se precisar suportar navegadores muito antigos.

### Qual é o croma máximo no OKLCH?

Não há máximo fixo. O croma possível depende da luminosidade, do matiz e da tela; em sRGB a maioria dos matizes fica bem abaixo de 0,37.

### Como converto hex para OKLCH?

Cole o hex num seletor OKLCH como o oklch.com, ou no painel de cores das devtools do navegador, que pode mostrar a mesma cor em OKLCH.