Elements of Ui Design – ColorPicker


Update: ColorPicker sources are included in the Fotowall project. The files you’re looking for are the ColorPickerItem ones.

Say you’re writing an application and you want to let the user to change the color of an item; what will you do?

The standard approach is to popup a color dialog with the standard HSV selector and all the sliders and values and buttons and confusion. Another approach is to pop down a combobox with a selection of default colors where the user won’t find the colour she is looking for (unless it’s RED, of course :-)).
Both approaches need you to get shocked by another window appearing right in front of you, so you loose the context and move the mouse far away from where it was.

Let’s take a look at this new approach:

The 2d (yet perspective transformed) dialog smoothly fades in when hovering the color and your favorite hue is just 1 or 2 clicks apart!