It's a stateless component that supports 2-way data binding, so it is able to take a
color prop, and update that color via an
There are 2 slider components here, one for the shade (2-axis slider) and one for the hue (x-axis slider).
The shade slider is made of 3 stacked linear gradients, and the hue slider is made of a single linear gradient with multiple stops.
Initially, I was using
canvas.getImageData() to get the color of the pixel based on the mouse position, but that proved to be problematic. For example, although getting the color based on coordinates is rather easy, getting the coordinates based on color is difficult and CPU intensive.
Luckily, it turns out that there's a color format that is perfect for this case - HSV. In that format, the 2 first elements are roughly the x/y coordinates of the
<ShadePicker/>, and the 3rd element is the x coordinate of the
See it live on CodePen: