Picking colors

Published by Vlasta on November 17th 2008.

In the recent survey, users’ opinion indicate that a color picker is one of the most important user interface elements in a simple image editor. While users expressed satisfaction with the current color picker, I feel there is still room for improvement. This article summarizes the plans for color selection improvements. Your opinions are of course welcome.

Current state

With RealWorld apps becoming more and more complicated, new methods for color selections were popping in and it all became a mess. There are too many different ways for color selections:

• Color buttons in dialogs with popup windows presenting a set of stock colors.
• Standard Windows color selection dialogs (accessible through the color buttons).
• “From screen pixel” color picker (accessible through some of the color buttons).
• Main menu and toolbar entries with colors automatically generated from the currently selected color.
• Panel with 2D color areas and RGBA color sliders and edit boxes.
• Panel with color swatches.

Furthermore, sometimes the colors are using floating point (HDR) values, sometimes they are given as integers with decimal or hexadecimal base. Ugly for the end user.

Format unification

First thing to unify is the format for color values. The increasing CPU power allows the image editing industry to move from 8 bits per pixel to floating point HDR formats. Hence, it makes sense to completely abandon the “awkward” 0-255 range and use floating point values in range 0-1 or a bit more user friendly 0-100% range. (BTW: HDR colors can of course reach outside this range and the updated color pickers must take this into account.) This setting will be configurable in the next version.

This means getting rid of the Windows color selection dialog and replacing it with own color selection supporting HDR color values. Also, users should be able to specify alpha (aka opacity or coverage) in the new dialog.

Picker types

Color button

The left picture shows a color picker button with a palette of colors. The three rows of color at the top are automatically generated from the current color. The colors in the middle are hard-coded stock colors. The last line of colors shows 8 recently used colors. The auto-generated and last used colors are optional and users may switch them off in the application options.

When user clicks the “From screen pixel” item, they can select any pixel on the screen and its color will be used. The “More colors…” item displays the color picker dialog displayed in the center of the picture.

Color dialog

The color dialog contains by default 3 color picking areas, and edit fields, where users can specify the values of R, G, B, H, L, S and A channels. The content of the color areas depends on the selected channel (marked by the radio button).

Both the color dialog and the color button can handle colors with or without alpha channel.

The look of this dialog can be customized in application options. It may look very differently, but users must spend some time learning how the customization works.

Color panel

The right image shows how the color picker embedded in the application looks like. It contains color areas for rough color selections. Edit boxes and sliders for accurate selection, an edit box with web hexadecimal color code (+ the obligatory color button with the “From screen pixel” function) and a swatch with up to 24 last used colors.

There are 2 active colors called “primary” and “secondary” (or “foreground” and “background” if you like (but this is not accurate)). And there are of course swatches with standard Windows colors, web-safe colors or user custom colors.

The color panel is configurable just like the color picker. But in this case it is even harder for the casual user.

Extensions

Color pickers may be added by third parties in the form of “View” plug-ins.

Gradients

The gradient fill styles will be able to use gradient with any number of colors. By clicking on the color band, a new stop is added. Color and opacity of the selected stop can be changed using the color button below.

Summary

The re-worked and unified color selection system will hopefully add to user comfort and reduce confusion. Because it is highly configurable, it should give users maneuvering space in finding their optimal configuration for color selection. Please share your thoughts…

Recent comments

Anonymous

Signed comments carry more weight! Don't be a stranger - log-in or register. It only takes few seconds.