A Flex Color Wheel Color Picker

It’s been a gripe around the Foosball table that color pickers just aren’t keeping up with the times. Who uses websafe colors anymore? Web 2.0 broke through those barriers at the first use of a reflective logo and hasn’t looked back. So as we were developing an application for a client we decided enough was enough and set out to build simple, fun and discoverable color picker.

The Ugly
First task was to look at existing examples and find out what is working for us and what isn’t. We knew that we didn’t like the current color picker it had to few colors and to many styling options that didn’t work. Sure this was a quick and dirty way to pick “Web Safe” colors and yes you can feed it your own array of colors but but c’mon it’s been around since at least Flash 5.

The Good
We felt a childhood connection with the Apple color picker it is the color wheel much like Kuler and we all learned about complementary colors ages ago in arts and crafts. These both of these examples are of course more complicated than just clicking on a swatch and choosing a color like the Flash/Flex color picker. When given a window there are more click events to be captured and more controls to be layered. Waaaay to much for the casual clicker and more than most apps need to just choose a color. So we decided to create something that was as efficient as the Flash picker and as powerful as Adobes.

The Bad (as in good)
We ended up with a solution that gave the most options with the least amount of resistance. In one click you can select from a full spectrum of colors and in a double click a cross section of the selected color spread to white and black. A second double click and your back to the familiar rainbow of colors. We kept with the color wheel motif and used up to 360 different colors. We found 360 to be beyond the resolution of our monitors or eyes in fact much past 180 ( try for your self in below) and you can’t tell difference. In a beta we’ll probably cap it off around 200.

We liked the simple clickable nature of the component. Once you get the hang of double clicking it’s easy to keep adjusting to get just that right Sea Foam Green.

Our main gripe for this alpha version is that it does not let you know about the double click. I have been arguing that most users don’t need that option. Most people would be happy just to get more than 256 colors and if they are willing to click around to discover the finer details of a color then they earned it. The counterpoint, and it’s a good one, is that there is really no way to know about the double click and consequently no way to get a color in the grey scale. I we’re working on some affordances to let the user know about the double click. So stay tuned.

A second gripe is that the double click does a spread from 90 degrees no matter which color you pick. We would like it so that if you click a color it stays put and white and black are 120 degrees away.

The Color Picker Explorer

The two faces of this color picker.

1. Explorer: As it loads up it’s a big color wheel. You can adjust the lightness/darkness, size and resolution of colors.
2. PopUp: Once you make the wheel radius smaller than 20 it changes event handlers and creates a larger wheel when clicked. This version handles the double click to see the greyscale

Improvements/Bugs

1. Need to have the expanded view (double click) in the exlorer mode
2. If you resize the page while the popup is loaded it doesn’t move or close
3. Popup only does down and should detect the edges to go to right, left, etc
4. See above gripes
5. We’ll add more…

Source
I’ll add the source to a follow up post as soon as it is stable. Feedback is welcome and if you’re going to Flexcamp drop me an email and I’ll be happy to explain more.

More Resources

gotoAndLearn Color Picker Tutorial