Why does OKLCH interpolation look smoother?

OKLCH is a perceptually even color space. Blending two colors through it keeps the apparent lightness steady, so the midpoint stays vivid. Blending in sRGB, the legacy default, often darkens or grays that midpoint between distant hues.

Can I build a gradient from a photo?

Yes. Switch to From a photo, then either let it read the dominant colors automatically, or drag a line across the image to sample its actual transition, like the band of a sunset. Both land in the editor for refinement.

Copy the live CSS, download a PNG at wallpaper and social sizes, download an SVG, or extract an even palette from the gradient and hand it to the palette generator.

Gradient generator

Linear, radial, and conic gradients with smooth OKLCH blending, live color names, and one-tap export. Or build one straight from a photo.

How this works

1 Pick your colors, or build the stops from a photo.
2 Choose linear, radial, or conic and set the angle.
3 Copy the CSS or download it as PNG or SVG.

Angle90°

OKLCH interpolation keeps the blend perceptually even, so the midpoint never turns muddy. Most tools only do sRGB.

Stops

#4A7EDB#4A7EDB

#D05A9E#D05A9E

100%

background: linear-gradient(90deg in oklch, #4a7edb 0%, #d05a9e 100%);

Method

OKLCH versus sRGB, and why it matters

Every gradient is a series of in-between colors your browser computes for you. The space it computes them in changes the result. The old default, sRGB, mixes the raw channel values, which works for close colors but goes wrong across a wide hue jump: blend a vivid blue into a vivid yellow in sRGB and the middle sags into a dull gray.

OKLCH is perceptually even, so the same blend keeps its brightness and passes through a clean green instead. This tool defaults to OKLCH and writes the modern CSS for it. Flip to sRGB to compare, or to match an older design that expects the legacy behavior.

Add up to eight stops, drag each along the track, and read the name of every color as you place it. When it looks right, copy the CSS, export a wallpaper-sized PNG or a crisp SVG, or pull an even palette out of the gradient and keep working in the palette generator.

The from-a-photo mode is where gradients get personal. Auto reads the image's dominant colors and orders them by lightness into a smooth ramp. Line sample is the one most tools lack: drag a line across a sunset, a sky, or ocean banding and the gradient follows the real transition under your finger, sampled from the full-resolution image.

FAQ

Common questions

Do the exports use OKLCH too?: PNG and SVG are pixel formats, so we bake the OKLCH blend into many fine stops when exporting; the file looks identical to the live preview.
Is my photo uploaded?: No. The image is read and sampled entirely in your browser; nothing is sent anywhere.