¿Por qué OKLab se ve tanto mejor que sRGB?

La interpolación sRGB plana produce medios tonos turbios porque los canales no rastrean la luminosidad percibida — rojo+verde a medio camino es una oliva oscura, no un amarillo limpio. OKLab está construido para que tamaños de paso iguales se vean igualmente diferentes al ojo, así las transiciones se quedan brillantes.

¿Qué hace la curva de easing?

Controla cómo se espacian los pasos a lo largo del gradiente. `Ease-out` agrupa más pasos cerca del inicio (útil para mapas de calor donde el extremo bajo importa más); `Ease-in-out` pone más detalle en ambos extremos.

Interpolación de Color / Pasos de Gradiente

Color

Genera los N colores espaciados uniformemente entre dos endpoints. Donde un gradiente CSS es una banda suave, esto te da muestras discretas que puedes enviar como series de gráfico, badges de estado, o leyenda de mapa de calor. Elige el espacio de color en que ocurre la interpolación: sRGB plano es el más rápido pero desigual; OKLab es perceptualmente uniforme (Tailwind v4, Radix Colors lo usan); linear RGB coincide con lo que hace un motor 3D; HSL mantiene los tonos moviéndose a lo largo del arco más corto. Las curvas de easing doblan el espaciado si quieres más pasos agrupados cerca de un extremo.

—

Presets

Color inicial

Color final

Pasos: 7Espacio de interpolaciónEasing

Pasos

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

OKLab es el default recomendado — Tailwind v4, Radix y los gradientes CSS modernos todos interpolan ahí.

Cómo usar

Configura el hex de inicio y fin (o usa un preset). Presiona ⇄ para invertirlos.
Elige el conteo de pasos y espacio de color — OKLab es el default más seguro para tokens de diseño.
Copia la lista completa como hex o HSL, o agarra cada muestra una a la vez.

Preguntas frecuentes

¿Por qué OKLab se ve tanto mejor que sRGB?: La interpolación sRGB plana produce medios tonos turbios porque los canales no rastrean la luminosidad percibida — rojo+verde a medio camino es una oliva oscura, no un amarillo limpio. OKLab está construido para que tamaños de paso iguales se vean igualmente diferentes al ojo, así las transiciones se quedan brillantes.
¿Qué hace la curva de easing?: Controla cómo se espacian los pasos a lo largo del gradiente. `Ease-out` agrupa más pasos cerca del inicio (útil para mapas de calor donde el extremo bajo importa más); `Ease-in-out` pone más detalle en ambos extremos.