FREE COLOR PICKER WHEEL APP SERIES

Now we needed to get the gradient to show up. Then we made these blocks really skinny and arranged them around a point:Ĭolored rectangles are arranged around a central point

FREE COLOR PICKER WHEEL APP SERIES

So to begin, let’s create a series of rectangles with increasing hues: The hue value of the HSL triad is a value from 0-360 (as in, 360 degrees in a circle). One color picker example we saw used a series of very thin pie slices to construct a color wheel. We decided to use this scheme to calculate a Hue, Saturation, Lightness value which we could then convert to an RGB value. The scale marked “Value” in the image probably wasn’t as important to us - we don’t want to display black on our color wheel. We noticed that the hue value changes as you rotate around the circle, lightness varies from near-white in the center to a fuller color on the edges. (We didn’t read it, we just looked at the pictures!) The picture of a color cylinder looked exactly like what we’re trying to create. We found this helpful article that explains some mathematical foundations behind computing colors. Though, we noticed that a number of color pickers we analyzed reported HSL values. In the end, our color picker widget needs to be able to capture an RGB color value and send it off the the back end. We couldn’t find a suitable open source solution, so we decided to write this ourselves.

We needed this to be circular, have white in the middle, and we needed to be able to move a marker and capture the color at that point when a user taps or clicks the wheel. We recently needed to implement a circular color picker similar to the one used by the Hue light bulb mobile app.

Free color picker wheel app