# OKLCH explicado: cor percetual para designers

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

O HSL prometeu cor legível e quase cumpriu. O OKLCH mantém a parte legível e corrige a mentira sobre a luminosidade, e é por isso que os sistemas de design estão a mudar para ele.

## The short version

- O OKLCH descreve uma cor com três valores: luminosidade percetual (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 cores têm para as pessoas, por isso duas cores com o mesmo L têm um contraste semelhante contra o branco.
- Em CSS escreve-se `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 um máximo fixo: a quantidade de cor possível depende da luminosidade, do matiz e do ecrã, e as cores fora do alcance do ecrã são trazidas de volta para dentro dele.
- Interpolar gradientes em OKLCH ou OKLab evita o meio cinzento e turvo 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. A vantagem prática para os designers é simples: muda o matiz e mantém o L, e a nova cor parece igualmente clara. O HSL não o consegue prometer, e é a razão por que o OKLCH se tornou a predefinição em sistemas de design mais recentes, incluindo a paleta de cores do Tailwind.

## Luminosidade, croma e matiz

| Letra | Nome | Intervalo | O que controla |
| --- | --- | --- | --- |
| L | Luminosidade | 0% a 100% (ou 0 a 1) | O quão clara a cor parece, como os olhos a julgam |
| C | Croma | De 0 para cima, raramente acima de 0,37 | A quantidade de cor: 0 é cinzento, mais alto é mais vivo |
| H | Matiz | 0 a 360 graus | Que cor: cerca de 30 vermelho, 110 amarelo, 140 verde, 265 azul |
| / A | Alfa | 0 a 1, ou 0% a 100% | Opacidade, opcional |

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

A **luminosidade** é a estrela. Vem do OKLab, um espaço de cor publicado em 2020 e construído para prever a luminosidade, a intensidade de cor e o matiz percebidos de forma mais uniforme do que os modelos antigos. O **croma** substitui a saturação: em vez de uma percentagem de algum máximo, é uma quantidade absoluta de cor, por isso um croma de 0,1 significa a mesma intensidade visual seja qual for o matiz. O **matiz** continua a ser um ângulo, mas os ângulos estão espaçados de modo a que um passo de 30 graus pareça uma mudança semelhante em toda a volta.

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

Pega em seis matizes e fixa a luminosidade e o croma em `oklch(65% 0.11 H)`. As amostras abaixo parecem uma só família, e o seu contraste contra o branco fica entre 3,1:1 e 3,4:1. Faz o mesmo em [HSL](https://gradiently.design/pt-pt/guide/hsl-colors) com 50% de luminosidade e o contraste contra o branco oscila de cerca de 1,07:1 no amarelo a 8,6:1 no 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. A mesma luminosidade, o mesmo croma, e parecem mesmo iguais.

Essa uniformidade é o que torna o OKLCH útil no trabalho real. Um conjunto de cores de estado, séries de gráfico ou etiquetas de categoria pode partilhar um só L e C e diferir apenas no matiz, e nenhuma grita mais alto do que as outras. Se depois precisares de um conjunto seguro para daltónicos, varias também o L, o que está tratado em [paletas amigas de daltónicos](https://gradiently.design/pt-pt/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 todas oklch().

O suporte dos navegadores é amplo, e podes confirmar 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 que combinações um ecrã normal consegue apresentar. Para converter um hex de marca existente, cola-o nesse seletor ou no painel de cores das ferramentas de programador do navegador, que consegue mostrar qualquer cor em OKLCH.

## Construir uma escala com OKLCH

Para fazer uma escala de tons claros e escuros, aumenta a luminosidade em passos iguais e deixa o croma subir para o meio e descer para as pontas. As cores muito claras e muito escuras fisicamente não conseguem guardar muita cor, por isso, se mantiveres o croma alto nos extremos, o navegador tem de as cortar. Aqui fica 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 semelhante, o que as escalas HSL raramente conseguem.

Como o L acompanha a luminosidade percebida, podes tomar decisões de contraste aproximadas só a partir dos números. Nesta escala, o texto branco passa os 4,5:1 de L 50 para baixo, e o texto preto passa de L 60 para cima. Confirma sempre com um [verificador de contraste](https://gradiently.design/pt-pt/guide/color-contrast-accessibility), mas raramente serás surpreendido. Transformar uma escala destas em tokens com nome está tratado em [design tokens](https://gradiently.design/pt-pt/guide/design-tokens).

## Gama: quando uma cor não existe no ecrã

O OKLCH consegue descrever cores que nenhum ecrã mostra. A maioria dos monitores apresenta sRGB; muitos telemóveis e portáteis recentes apresentam o Display P3, mais amplo. Aumenta o croma o suficiente e sais de ambos. Quando isso acontece, o navegador traz a cor de volta à mais próxima que o ecrã consegue mostrar, por isso nada se parte, mas podes não obter o que escreveste.

### Evita

- Croma alto com L muito claro ou muito escuro
- Copiar valores P3 para um guia de marca pensado para impressão
- Assumir que uma cor OKLCH viva parece igual em todos os ecrãs
- Usar croma acima de cerca de 0,2 em grandes áreas de fundo

### Faz

- Verifica valores num seletor que marque o limite do sRGB
- Mantém um hex de reserva para as cores de marca
- Baixa o croma para as pontas de uma escala
- Guarda as cores mais vivas para pequenos destaques

## Gradientes em OKLCH

Os gradientes são onde a cor percetual compensa de forma mais visível. Um gradiente CSS simples mistura em sRGB, que cai em cinzento entre matizes distantes. O CSS moderno deixa-te escolher o espaço em que misturar, e o OKLab ou o OKLCH mantém o meio brilhante e limpo.

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

As mesmas duas cores de três maneiras. O OKLCH percorre a roda de matizes, por isso pode passar por matizes que nenhum dos extremos contém.

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

Os Marks do Gradiently são gerados ao vivo em vez de escritos como CSS, e cada um traz a sua própria paleta: a tinta automática escolhe texto claro ou escuro a partir dessa paleta para cada linha, por isso as palavras leem-se sem teres de conferir números. Se preferires começar por um fundo vivo já pronto em vez de um valor num seletor, explora o Mercado por palavras de cor.

## FAQ

### O que é o OKLCH?

O OKLCH é um formato de cor baseado no espaço de cor OKLab. Descreve as cores por luminosidade percetual, croma e matiz, por isso valores iguais parecem igualmente claros e vivos.

### O OKLCH é melhor do que o HSL?

Para construir paletas, escalas e gradientes, sim, porque a sua luminosidade corresponde ao que os olhos veem. O HSL continua a servir para edições rápidas à mão.

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

Sim. As versões atuais do Chrome, Edge, Firefox e Safari suportam-no. Põe primeiro um hex de reserva se tiveres de suportar navegadores muito antigos.

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

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

### Como converto hex em OKLCH?

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