A gradient between two vivid colours often sags through grey in the middle. That is the interpolation space, not your palette — what in oklch fixes, and when it changes nothing.
Put blue and yellow at the ends of a gradient and the middle comes out a dull olive-grey. Nothing is wrong with either colour: by default a browser walks a straight line through sRGB from one to the other, and the straight line between two colours on opposite sides of the colour space passes close to neutral.
That is why the effect is so uneven in practice. Two neighbouring blues blend beautifully; blue to yellow, red to cyan and purple to lime all collapse in the middle. It is geometry, not taste.
CSS lets you name the space to interpolate in: linear-gradient(90deg in oklch, blue, yellow). OKLCH is perceptual and polar — it interpolates lightness, chroma and hue separately, so instead of cutting across the middle of the colour wheel the ramp travels around it. Blue to yellow stops being olive and becomes blue → cyan → green → yellow, saturated the whole way.
That is a design decision, not a bug fix: you traded a muddy middle for two hues that were not in your palette. If the detour is unwelcome, in oklab keeps the perceptual lightness but takes the straight path — cleaner than sRGB, without the trip through green. If you want the scenic route, in hsl longer hue goes the long way round the wheel.
Ramp #3ba7e0 to #8b5cf6 — a blue and a violet a short arc apart — in sRGB and in OKLCH, and the two are near enough indistinguishable: there is no grey to avoid, because the straight line never goes near neutral. The further apart the hues, the more the space matters. Inside roughly a quarter turn of the colour wheel, pick whichever looks right and move on — put both in the Gradient Maker rather than spending a decision on it.
The old advice is that fading to transparent gives a dirty grey edge, because transparent means rgba(0, 0, 0, 0) — black with no alpha — so the ramp drags toward black as it fades. Current browsers interpolate with premultiplied alpha, which takes the hue from the opaque end, and to transparent now looks correct.
Writing the explicit rgba(229, 46, 113, 0) form is still the better habit, because it survives leaving CSS. SVG, canvas and plenty of design tools do not all premultiply, so a gradient that looks clean in the browser can come back with a grey cast once something else rasterises it.
Eight bits per channel gives 256 steps. Spread a low-contrast ramp — a near-black navy to a slightly different near-black — across a 2560px hero and there are far more pixels than steps, so the transition arrives in stripes. Dark, low-contrast and large-area is exactly where hero sections live.
In order of what they cost you: shorten the distance the ramp travels, add intermediate stops so each segment covers a smaller range, or overlay very subtle noise, which dithers the steps into something the eye reads as smooth.
Each of these is a panel apart in the Gradient Maker: compare interpolation spaces side by side, bake an easing curve into plain stops, paste in the gradient already in your stylesheet to edit it, and sweep a text colour across the ramp for its worst contrast ratio. Convert individual stops with the Color Converter.
background first and the in oklch version straight after — a browser that cannot parse the second keeps the first, and that is the whole fallback mechanism.