colorsgradientcolor-pickercolor-wheel

Circular saturation-brightness gradient for color wheel

The square saturation-brightness picker has two gradients:

  1. White to black from top to bottom
  2. Transparent to opaque hue from left to right

Square saturation-brightness picker

I'm trying to make this as a circular picker which should look like this:

Circular saturation-brightness picker

Ref: https://paletton.com/

I tried to draw the circular picker like the square one but I lose the colors around the corner. It looks like this:

enter image description here

So what can I do to make the circular saturation-brightness gradient?

Solution

  • You make a full circle of red (#FF0000). Now you draw a piece of a circle (360°/3=120°) with black (#000000) and you set a radial-gradient where the middel of the circle is transparent or red and the outer band is black. Now you do the same for white (#FFFFFF) and you place this next to the black piece. Now you could fade out the edges of the black and white piece.

    To make this work the layer with the red circle needs to be the bottom layer.

    Sorry for my english