![]() 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 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. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |