OKLCH Gradient Generator

Because they're being interpolated in sRGB — blending the color channels directly, which is what `linear-gradient(… in srgb …)` and older browsers do. Blending two saturated, opposite hues (e.g. blue and yellow) passes through low-saturation values, so the midpoint desaturates toward gray. Modern browsers now default gradient interpolation to OKLAB, which avoids the dead zone; OKLCH goes a step further by taking the shortest path around the hue wheel. Pick the space explicitly — or export dense stops — to get the perceptual result in every browser.

Both are perceptual and avoid the gray dead zone. OKLCH interpolates hue on a circle (taking the shortest path around the wheel), which keeps transitions vivid and is usually what you want for two distinct hues. OKLAB interpolates on rectangular axes, giving a slightly straighter, sometimes desaturated path through the middle. Try both and pick what looks best.

The native form, `linear-gradient(90deg in oklch, …)`, is terse and correct, but only in browsers that support CSS Color 4 interpolation. The dense-stops form pre-samples the perceptual curve into many plain hex stops, so it renders the same smooth result in any browser. Use native where you control the browser baseline; use dense stops for maximum compatibility.

Yes. OKLCH hue interpolation takes the shortest path around the color wheel, so a gradient from hue 20° to 340° crosses through 0° rather than sweeping the long way through 180°. That avoids accidentally cycling through unwanted colors.

Interpolation happens in OKLCH/OKLAB, which can express colors beyond sRGB. The hex stops in the dense export are mapped to the closest sRGB-displayable color (chroma-clamped, preserving hue and lightness). The native export preserves your original color values for wide-gamut-capable displays.