Tool · OKLCH Gradient

Gradients that don't go gray in the middle.

Interpolate in OKLCH so blue → yellow stays vivid through the midpoint instead of muddying to gray the way sRGB does. Multi-stop, four hue strategies, CSS / SVG / Tailwind export.

Open in gradient maker →Turn into palette →All tools

Above: gradient rendered with OKLCH-interpolated stops, baked into sRGB so every browser shows the same thing.

Why OKLCH

sRGB interpolation (browser default)

Crosses through desaturated/muddy gray when hues differ. Click a cell to copy its hex.

OKLCH interpolation (The Color Tools)

Maintains perceptual chroma — midpoint stays vivid. Click a cell to copy its hex.

background-image: linear-gradient(90deg in oklch, #6b8af2 0%, #f26b5e 100%);

Uses native in oklch. Chrome 111+, Safari 16.4+, Firefox 128+.

Why this matters → Native CSS linear-gradient(blue, yellow) goes through muddy gray. linear-gradient(in oklch, blue, yellow) stays vivid. The Color Tools lets you author once and ship both — modern browsers get the OKLCH path; older browsers get a pre-sampled fallback that looks identical.