Blend two colors across as many steps as you need, in OKLCH or sRGB, and copy the ramp as color-mix() declarations or as plain hex.
/* the whole ramp, as CSS does it */ background-image: linear-gradient(90deg in oklch, #0d9488, #f59e0b); /* one step at a time */ --step-0: color-mix(in oklch, #f59e0b 0%, #0d9488); /* #0d9488 */ --step-13: color-mix(in oklch, #f59e0b 13%, #0d9488); /* #279c7d */ --step-25: color-mix(in oklch, #f59e0b 25%, #0d9488); /* #45a26e */ --step-38: color-mix(in oklch, #f59e0b 38%, #0d9488); /* #64a65c */ --step-50: color-mix(in oklch, #f59e0b 50%, #0d9488); /* #82a946 */ --step-63: color-mix(in oklch, #f59e0b 63%, #0d9488); /* #a1a92d */ --step-75: color-mix(in oklch, #f59e0b 75%, #0d9488); /* #bfa706 */ --step-88: color-mix(in oklch, #f59e0b 88%, #0d9488); /* #dba300 */ --step-100: color-mix(in oklch, #f59e0b 100%, #0d9488); /* #f59e0b */
Because sRGB blends the display signal, not the appearance. Halfway between two saturated hues it dips through a muddy grey, while OKLCH holds the chroma up and turns the hue the short way round.
Yes, it is in every current browser. The hex values are listed beside each step for anywhere that has to support older ones.
Mix towards white for a tint and towards black for a shade. In OKLCH those stay recognisably the same color, which is the failure mode of doing it in sRGB.