Por que OKLab parece tanto melhor que sRGB?

Interpolação sRGB simples produz meios-tons turvos porque os canais não rastreiam a luminosidade percebida — vermelho+verde no meio é uma oliva escura, não um amarelo limpo. OKLab é construído pra que tamanhos de passo iguais pareçam igualmente diferentes ao olho, então transições ficam brilhantes.

O que a curva de easing faz?

Controla como os passos se espaçam ao longo do gradiente. `Ease-out` agrupa mais passos perto do início (útil pra mapas de calor onde a extremidade baixa importa mais); `Ease-in-out` põe mais detalhe nas duas extremidades.

Interpolação de Cor / Passos de Gradiente

Cor

Gera as N cores espaçadas uniformemente entre dois endpoints. Onde um gradiente CSS é uma faixa suave, isto te dá amostras discretas que você pode enviar como séries de gráfico, badges de status, ou legenda de mapa de calor. Escolha o espaço de cor onde a interpolação acontece: sRGB simples é o mais rápido mas desigual; OKLab é perceptualmente uniforme (Tailwind v4, Radix Colors usam); linear RGB combina com o que um motor 3D faz; HSL mantém matizes se movendo ao longo do arco mais curto. Curvas de easing dobram o espaçamento se você quer mais passos agrupados perto de uma extremidade.

—

Presets

Cor inicial

Cor final

Passos: 7Espaço de interpolaçãoEasing

Passos

#3B82F61/7
#6A7FE72/7
#8B79D83/7
#A672C84/7
#BF68B95/7
#D65BA96/7
#EC48997/7

OKLab é o padrão recomendado — Tailwind v4, Radix e gradientes CSS modernos todos interpolam lá.

Como usar

Configure o hex de início e fim (ou use um preset). Aperte ⇄ pra invertê-los.
Escolha contagem de passos e espaço de cor — OKLab é o padrão mais seguro pra tokens de design.
Copie a lista inteira como hex ou HSL, ou pegue cada amostra uma de cada vez.

Perguntas frequentes

Por que OKLab parece tanto melhor que sRGB?: Interpolação sRGB simples produz meios-tons turvos porque os canais não rastreiam a luminosidade percebida — vermelho+verde no meio é uma oliva escura, não um amarelo limpo. OKLab é construído pra que tamanhos de passo iguais pareçam igualmente diferentes ao olho, então transições ficam brilhantes.
O que a curva de easing faz?: Controla como os passos se espaçam ao longo do gradiente. `Ease-out` agrupa mais passos perto do início (útil pra mapas de calor onde a extremidade baixa importa mais); `Ease-in-out` põe mais detalhe nas duas extremidades.