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

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.

Ferramentas relacionadas

Pré-visualização de CSS color-mix()

Compare como a função moderna CSS color-mix() mistura duas cores em diferentes espaços de interpolação (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) — amostras ao vivo, hex computado, faixa de gradiente completa por espaço e CSS copiável.

Cor 0 0

Seletor de Cor OKLCH

Escolha cores no espaço OKLCH perceptualmente uniforme (luminosidade · croma · matiz) — e veja se cada escolha cabe dentro do gamut de tela sRGB.

Cor 0 0

Buscador de nome de cor

Encontre o nome de cor CSS, Tailwind ou XKCD mais próximo de qualquer hex/RGB — ordenado por distância perceptual em OKLab.

Cor 0 0

Gerador de Gradientes CSS

Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.

Cor 0 0

Misturador de Cores

Interpole entre duas cores em RGB, HSL ou CIELAB. Veja uma faixa de gradiente com passos intermediários.

Cor 0 0

Gerador de Conic Gradient

Construtor visual para CSS `conic-gradient()` — rotacionar ângulo, posição do centro, paradas de cor, pré-visualização de forma. Útil para gráficos de pizza, gráficos de anel, padrões xadrez, rodas de cor.

Cor 0 0