Put the same two colors through both interpolation spaces side by side, see where sRGB loses its chroma, and copy the gradient that keeps it.
/* the browser interpolates in sRGB unless told otherwise */
.hero {
background-image: linear-gradient(90deg, #eab308, #2563eb);
}
/* one phrase moves it to a space that keeps the chroma up */
.hero {
background-image: linear-gradient(90deg in oklch, #eab308, #2563eb);
}
/* or write the stops out, for anywhere without the syntax */
.hero {
background-image: linear-gradient(90deg, #eab308, #cbb700, #a5bb12, #75be3e, #26be5f, #00bb7f, #00b59c, #00abb7, #009dce, #008cdf, #0079e9, #2563eb);
}
Because the browser interpolates in sRGB by default, and the straight line between two distant hues passes near the centre of the color space, which is grey. The further apart the hues, the worse the dip.
Add the space to the gradient: linear-gradient(90deg in oklch, ...). One phrase, and the ramp travels round the hue circle instead of through the middle.
Write the stops out. The third snippet lists the computed colors, which gives the same ramp anywhere, at the cost of a longer declaration.