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

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.

Related tools

CSS color-mix() Preview (Interpolation Space Comparison)

Compare how the modern CSS color-mix() function blends two colors in different interpolation spaces (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) — live swatches, computed hex, full gradient strip per space, and copyable CSS for each.

Color 0 0

OKLCH Color Picker

Pick colours in the perceptually uniform OKLCH space (lightness · chroma · hue) — and see whether each pick fits inside the sRGB display gamut.

Color 0 0

Color Name Finder

Find the closest CSS, Tailwind, or XKCD-survey color name for any hex/RGB input — ranked by perceptual distance in OKLab color space.

Color 0 0

CSS Gradient Generator

Build linear or radial CSS gradients with multi-stop colors and copy the code.

Color 0 0

Color Mixer

Interpolate between two colors in RGB, HSL, or CIELAB space. See a gradient strip of intermediate steps.

Color 0 0

Conic Gradient Generator

Visual builder for CSS `conic-gradient()` — rotate angle, center position, color stops, shape preview. Useful for pie charts, ring charts, checkered patterns, color wheels.

Color 0 0