Como usar OKLCH no CSS

A sintaxe

color: oklch(62% 0.19 255);
color: oklch(62% 0.19 255 / 50%); /* com transparência */

• Luminosidade vai de 0% (preto) a 100% (branco).
• Croma indica o quão vibrante é a cor. 0 é cinza, e a maioria das cores utilizáveis fica abaixo de cerca de 0.37.
• Matiz é o ângulo da cor em uma roda de cores, de 0 a 360.

Teste com o seletor de cores OKLCH, ou converta a cor da sua marca com o conversor de HEX para OKLCH.

Crie um conjunto de tons

Mantenha o croma e o matiz iguais e altere apenas a luminosidade:

:root {
  --brand-300: oklch(80% 0.12 255);
  --brand-500: oklch(62% 0.19 255);
  --brand-700: oklch(45% 0.17 255);
}

Crie estados de hover

A sintaxe de cor relativa permite derivar uma cor a partir de outra:

.btn { background: var(--brand-500); }
.btn:hover { background: oklch(from var(--brand-500) calc(l - 0.08) c h); }

As cores relativas são mais recentes que o próprio oklch(), então verifique o suporte dos navegadores do seu público.

Misture cores

Use color-mix() para misturar duas cores. Misturar em OKLCH costuma gerar tons intermediários mais limpos do que em sRGB:

background: color-mix(in oklch, var(--brand-500) 70%, white);

Você pode testar misturas com o misturador de cores.

Adicione um fallback

Os navegadores modernos suportam OKLCH. Para os muito antigos, coloque antes um valor HEX. Os navegadores ignoram o que não conseguem ler:

color: #2563eb;
color: oklch(54.6% 0.215 262.9);

O conversor de OKLCH para HEX gera esse valor para você.

Verifique o contraste

A luminosidade torna o contraste mais previsível, mas não é uma garantia. Sempre teste os pares de texto e fundo com o verificador de contraste.