I made this color picker component using React, Webrix.js, and a nice color utility library called color-convert.
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 onChange handler.
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 <HuePicker/>.
See it live on CodePen:
Top comments (0)