A blue-to-yellow gradient can pass through grey, green or pink. The colour space it blends through decides which, so this tool shows all six side by side.
OKLCH: Keeps colour strong by moving round the hue circle. May pass through unexpected hues.
At its weakest point, white text reaches 1.5:1 and black text reaches 3.0:1. Neither is reliable across the whole gradient, so place text over one end only or add a solid panel behind it.
The modern line uses the CSS in interpolation syntax, which current browsers support and older ones ignore. Put the fallback first and the modern line after it, and an older browser keeps the same colours as closely spaced sRGB stops.
Use it for hero backgrounds, chart legends and any two-colour blend that has gone muddy in the middle. An OKLCH or LCH blend often keeps colourful stops colourful.
The CSS syntax for choosing a blend space is well supported in current browsers, but not in older ones, so keep the fallback. Displays differ, and subtle dark gradients can show visible bands.
Hue-based blends travel round the colour circle, so distant hues can bring in colours that neither stop contains. That can be what you want, or it can be a surprise.
Each stop is converted to the chosen space, values between stops are interpolated in that space, and each result is converted back to sRGB. In LCH and OKLCH, hue takes the shorter way round. The notes under the controls measure the sampled result: how far chroma dips in the middle, how much hue it covers, and the largest step in lightness.