We decided to lay a 2D canvas over our color wheel where we could draw our selector button and move it around based on coordinates when a user touches the display. This seemed like a good job for a canvas element - that would allow us to overlay an image over the color wheel that we can draw (and redraw!) programmatically. We don't have a great native HTML input element that we could use here, so we decided to draw a little selector circle on top of the color wheel to indicate the user's selection, just like the Hue app does.
We had our color wheel, but no way for the user to interact with it.
We expanded the center slightly to expose a larger white region Instead of getting fancy with the gradient background, we decided to open up a hole in our circle and throw a white background behind the center of our new doughnut. Our template also has a considerably bigger white center. It might be hard for fat fingers to select white. Looks great! This widget is going to show up on a touchscreen, so we were worried about how small the white area was in the center.
We applied a linear gradient from 50% to 100% lightness to each pie slice:Įach "slice of the pie" has a gradient applied The HSL resource from earlier told us that 100% lightness would be white, while 0% lightness would be black. We need a white center with a colorful ring outside. 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
#COLOR PICKER WHEEL 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. Meet us out and about at business leadership events where we share our perspective on practical digital innovation.Join SPARK! Take a look at our culture, growing team, and current open positions.Learn how our expert team proudly designs and builds everyday digital revolutions.Discover your roadmap to success at the intersection of innovative and functional.Read about what we’ve learned over our years of creating custom tools that help business thrive.SPARK helps you get out from under inefficiencies and on top of growing, innovating, and succeeding.Scale up and take off with design+builds just right for innovative entrepreneurs.Streamline and grow systems with technology tailored to your specific process.Digitize and improve the quality of your health services with the right technology.
#COLOR PICKER WHEEL SOFTWARE#
0 kommentar(er)
