Why does OKLab look so much better than sRGB?

Plain sRGB interpolation produces muddy mid-tones because the channels don't track perceived lightness — red+green halfway is a dark olive, not a clean yellow. OKLab is built so equal step sizes look equally different to the eye, so transitions stay bright.

What does the easing curve do?

It controls how the steps space along the gradient. `Ease-out` clusters more steps near the start (useful for heatmaps where the low end matters more); `Ease-in-out` puts more detail at both ends.

Color Lerp / Gradient Steps

Color

Generates the N evenly-spaced colors between two endpoints. Where a CSS gradient is one smooth band, this gives you discrete swatches you can ship as chart series, status badges, or a heatmap legend. Pick the color space the interpolation happens in: plain sRGB is fastest but uneven; OKLab is perceptually uniform (Tailwind v4, Radix Colors use it); linear RGB matches what a 3D engine does; HSL keeps hues moving along the shorter arc. Easing curves bend the spacing if you want more steps clustered near one end.

—

Presets

Start color

End color

Steps: 7Interpolation spaceEasing

Steps

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

OKLab is the recommended default — Tailwind v4, Radix and modern CSS gradients all interpolate there.

How to use

Set the start and end hex (or use a preset). Hit ⇄ to reverse them.
Pick the step count and color space — OKLab is the safest default for design tokens.
Copy the whole list as hex or HSL, or grab each swatch one at a time.

Frequently asked questions

Why does OKLab look so much better than sRGB?: Plain sRGB interpolation produces muddy mid-tones because the channels don't track perceived lightness — red+green halfway is a dark olive, not a clean yellow. OKLab is built so equal step sizes look equally different to the eye, so transitions stay bright.
What does the easing curve do?: It controls how the steps space along the gradient. `Ease-out` clusters more steps near the start (useful for heatmaps where the low end matters more); `Ease-in-out` puts more detail at both ends.