O que são cores OKLCH?

Matheus Cardoso·8 de maio de 2026

oklch é um modelo de cor mais recente projetado para ser perceptualmente uniforme — ou seja, a forma como as cores parecem aos nossos olhos corresponde à matemática por trás delas. Diferente de modelos mais antigos como rgb ou hsl, o OKLCH produz resultados previsíveis ao ajustar luminosidade, croma ou matiz.

Modelos de cor

A maioria dos desenvolvedores conhece rgb e hsl. Esses modelos são baseados em como as telas emitem luz, não em como percebemos cor. Essa desconexão faz com que duas cores com o mesmo valor de "luminosidade" no HSL possam parecer muito diferentes aos nossos olhos.

O OKLCH resolve isso. Ele é construído sobre o espaço de cor OKLab — um modelo matematicamente rigoroso que mapeia diretamente a percepção humana de cor. O "OK" representa uma versão aprimorada do modelo Lab original.

Estrutura

Uma cor OKLCH é definida por três valores:

/* oklch(lightness chroma hue) */
color: oklch(0.7 0.15 280);

/* with alpha */
color: oklch(0.7 0.15 280 / 0.5);

Brilho consistente

A maior vantagem do OKLCH: cores com o mesmo valor L realmente parecem igualmente brilhantes. No HSL, um amarelo e um azul com a mesma luminosidade parecem completamente diferentes.

Abaixo, todo círculo tem L = 0.7 e C = 0.15, com a matiz rotacionando de 0° a 330°. Note como todos compartilham o mesmo brilho percebido:

Agora compare com HSL — mesmo valor de "luminosidade" de 50%, mas brilho percebido totalmente diferente:

Interativo

Ajuste os controles para explorar o espaço de cor OKLCH:

Gradientes

Gradientes CSS podem interpolar em diferentes espaços de cor. Gradientes OKLCH evitam os tons acinzentados que afetam o sRGB. Compare:

O gradiente sRGB passa por uma área cinza opaca. O OKLCH mantém transições vibrantes e perceptualmente suaves — da forma que nossos olhos esperam que a cor se misture.

/* Specify the color space in CSS gradients */
background: linear-gradient(in srgb, #ff00ff, #00ff00);
background: linear-gradient(in oklch, #ff00ff, #00ff00);

Suporte dos navegadores

O OKLCH é suportado em todos os navegadores modernos — Chrome 111+, Firefox 113+, Safari 15.4+. Para navegadores mais antigos, forneça um fallback em RGB ou HSL:

/* Fallback for older browsers */
color: #7b61ff;
color: oklch(0.6 0.24 290);

O navegador ignora a segunda declaração se não entender oklch, usando o valor hexadecimal como fallback.

Mais

O OKLCH já é usado nos design tokens deste site. Para um mergulho mais profundo e ferramentas interativas, veja oklch.com ou a MDN docs.