How to make a color picker square material?

[Cestarian]

I am trying to create something like the square in the middle here.

For creating a color picker, but i’m not that experienced with materials so i don’t really know what i’m doing, I figured out that it should probably work by using a linear gradient, with the U gradient as the saturatoin and the inversed V gradient as the value.

I would have expected something like this to work:

But as you can see the left side is not the way i want it (it should be white with saturation decreasing as it goes further left, instead it’s the brightness that does.

I can see I’m kinda close but not quite there, is there anyone who knows how to get the result i want?

[Cestarian]

I figured it out.

But a more clever way is to do it like this

Achieves same result.

Edit: The power node at the end makes it look better (look like in all other software), but if you want the square to be accurate (as in the color you select actually being a 1:1 match to where you clicked) you should remove it.