Color Picker Control
Written by Mike Lischke   
Old style color picker control.
Old style color picker control.
One of my favourite areas of interest are colors and their meaning to the human being. Colors are very important for the graphical user interface (GUI) and must carefully be selected. Of course each person has a very own look at colors and what one finds very appealing might be distracting or even disturbing to others. So probably the best way to handle colors in GUIs is to let the users pick their preferred colors. For this task a neat color picker control is needed that provides an intuitive way of selecting a color but also presents the choices in a customizable way.

In 1999 I wrote a small and easy to use color picker control for Delphi and Borland C++ Builder that was very similar to the color selection tools in MS Word, basically the archetype of the current work. This control worked well and has won many supporters. The image to the left shows a typical screen shot of this control, where you can see a fixed arrangement of color areas carrying a certain set of colors, including predefined colors (from MS Word), system colors and also freely selectable colors. You can still download the old variant from this site.

While this old color picker control served the average requirements very well it was never meant to be more than a simple color selection tool. For more ambitious tasks a few more things need to be considered, not the least, the color space in which a color can be chosen. Also well established systems like industrie colors could be a worthy addition. So I went for color theory and investigated what can be found online to come back and create a new kind of color selection tool.

One of the primary goals for the new color picker was the ability to easily extend it beyond its built-in functionality by other developers. For this task the color picker was splitted into a general management part (e.g. control handling) and the specialized parts, which are different for each kind of color picker. Such a specialized component is named color widget and a set of basic widgets were created as the initial functionality. Below is a list of currently implemented color widgets.

HLS widget HLS color circle
Classical color picker used for the HLS color model (hue, luminance, saturation), maintaining a color circle for hue and saturation. You need a separate gray ramp or similar widget to let the user adjust the luminance. 		Color swatch widget Color swatch file
Color swatch definitions as stored in *.aco files used by Adobe Photoshop and others. These files can contain many different sets of colors, including but not limited to Pantone, VisiBone, ANPA, FOCOLTONE, HKS etc.
Delphi colors widget Delphi/BCB colors
Predefined colors of the VCL like clFuchsia, including all system colors (clWindow, clBtnFace etc.). 		HYPE's colors widget HYPE's Netscape colors
HYPE's set of 455 predefined colors for Netscape v.3.
HTML colors widget Named HTML colors
Colors used in HTML encoding. The color names are not part of the official HTML specification but are recognized by the major browsers. 		MS Office widget Microsoft Office 2000 predefined colors
This set contains the colors as used in the MS Office 2000 color selection tool.
Compare widget Two field visual color comparation widget
Color picker widget, which takes a current color and an alternative color and displays them side-by-side to allow a visual comparation. 		Windows color widget Windows system colors
Predefined Windows system colors like clWindow, clBtnFace etc. This is actually a subset of the Delphi colors.
Windows XP icon color widget Windows XP icon colors
Primary colors used in Windows XP icons.

Color Widgets, nuts and bolts of the tool

Sample widget layouts Many of the widgets listed above represent a discrete set of colors that can be displayed in different ways. The image to the right shows four of the possible layouts such widgets can have. The first one is a simple list. Beside it in the first row you see a list with color names and a widget with vertical stripes layout. The large widget finally uses a square collection without any spacing and is a color swatch widget that has the Adobe Photoshop Elements 2 web spectrum swatch loaded.

Of course you can have any kind of widget, not just discrete color collections. The HLS circle shows one possiblity, others include ramps, color wheels or even 3 dimensional color selectors. Possibilities are only limited by your imagination.

In order to support advanced selection abilities a widget can use any out of a list of color spaces and schemes. This includes not only RGB, but also CMY(K), CIE L*a*b, gray scale, HLS, HLV, CIE XYZ, YCbCr, YUV(K) and Yxy. Most of the handling for this stuff is implemented in my Color Tools library, which also contains a lot of other useful functionality. Since color schemes are enforced by the widgets not the color picker control there can be even more exotic schemes. It is all a matter of what a particular widget supports. Because of this variety of schemes it is necessary to establish a commonly known exchange mechanism, so each color widget is required to convert between its native color scheme and CIE XYZ as neutral exchange format. The base implementation additionally provides methods for conversion to and from RGB (actually a Windows color reference) and to a display color. Both RGB colors can be gamma corrected and the display color additionally uses the color management support of the OS for highly accurate display. Certain color spaces (gray scale, CIE L*a*b* etc.) also need a white point for conversion, which can be specified as well.

This precision produces very good display results that can keep up with those of Photoshop. That in turn allows the new color picker control to be used in applications where color fidelity plays an important role. But of course also simpler color selection tasks are a good field of application without the control getting unnecessarily complex.

Co-workers sought

Due to the alpha stadium of the project there are still a lot of things expected to change in the development process. One design goal, which has recently be added is to create all classes in such a way, that they can easily be ported to Delphi.NET. Currently there are still Windows messages used in the control, but plans are to changed this so that they are no longer needed. Nonetheless, the color picker control can already be used in applications and its current state is a good starting point for further development. What is needed are more programmers to drive its development. Also creators for new color picker widgets are needed, to increase the attraction to potential users. So if you have interest to help with the development then do not hesitate to contact me (see below for the webmaster e-mail address).

Design time support

color pickerAnother planned and partially implemented speciality of the color picker is its extended design time support for the Delphi IDE. There is a special component editor to allow the modification of the widget structure of a color picker. But not only that. With some neat tricks it was possible to replace the color selection comobobox that is used in the IDE by an own implementation that supports the full range of color selection abilities, including individual manipulation of each color component. See below a screen shot of the Delphi IDE with an open color picker component editor.

Platform compatibility

The Soft Gems Color Picker is using some functionality of the operation system that is not available on all platforms. This is mainly alpha blending and gradients. But since these things are not supported on Windows 95 you cannot use the component set with this OS.

License:

Soft Gems Color Picker is released under MIT license. This license is very generous and allows use of the code in any application including commercial software.

Development plan

The Soft Gems Color Picker control is currently in an early alpha stadium but can already be used for common color selection tasks. There is also a base implementation that can easily be extended. What mainly remains to make it a fully working beta version is certain mouse handling, keyboard support and some classes for design time support. But since it is still alpha you should be aware that there can and will be changes in the interfaces. So properties might get renamed, source code reorganized, new functionality will replace outdated stuff etc. The following lists most important things I want to include:
  • Initial implementations for all color spaces and schemes.
  • Fully take over color property editing tasks in the IDE.
  • Create a range of controls like color buttons, color combo boxes, color menus etc.
  • Perhaps a .NET implementation. Depends on how LCMS can be used in .NET. Code is designed to make a port as painless as possible (no pointers, Windows messages, OLE and things like that).
  • Perhaps an OCX for VB etc.
It will take several milestones until the first final version is ready. Plans are not as far as defining each milestone (I don't even know how many will be necessary) at least the first milestone is reached: the Color Picker source code is made public and placed in the Soft Gems source repository for collaborative work.

Downloads:

Note: The following download is still the old version. The new version is under preparation and should follow soon.
 
Color Picker Button
Button with a drop down menu which allows to select a color.
Version: 1.2 Last change: 03. Feb 2007
Download count: 39974 Size: 50 KB
Author: This e-mail address is being protected from spam bots, you need JavaScript enabled to view it Website: www.soft-gems.net
Platform: Delphi 4 - 5, BCB 4 - 5 Type of download: Delphi component
Last Updated ( Friday, 06 April 2007 )