How can I generate an overlay for a saturation-value square in a colorpicker?

Question

I'm creating a color picker in a software that doesn't allow you to draw directly to the screen, so I cannot generate an image at runtime.

I'm making a hue-sat-value color picker from scratch and I want to generate a transparent png that will overlay, like this one I've found online.

a transparent overlay for tweaking value and saturation on a color picker

I want to be able to lay this over a solid hue to create a range where the x axis represents the saturation and the y axis represents the value, like this for red:

a square with a red gradient

I've been able to generate gradients for specific hues, no problem:

red gradient color picker purple gradient color picker

but the problem is that I can't seem to translate that to the alpha to properly blend it to the above image, resulting in the gradient below.

different red gradient color picker

I generated this by first generating a gradient and then subtracting a white to black value gradient so that I could isolate just the saturation, and then using that difference brightness as the alpha value.