ColorPicker

Introduction

The ColorPicker control offers the possibility to choose a color and pass its values to the application. It is a composite control and consists of the following parts:
On the left side, there is a colorpicker box showing the value and saturation gradients of the selected color. The value and saturation values can be changed using the mouse.
On the right side, there are input fields for RGB, HSV and HEX values.
At the bottom, there is a slider for the hue value.
By passing a color value to the parameter colorString, the ColorPicker control starts using this color. Leaving this parameter blank forces the ColorPicker to start with initial color 'white'. The selected color is passed to the application via the events change and liveChange.

Examples

ColorPicker with default values

In this example, the ColorPicker control is created with default values (= color white). The event change is used for evaluating the user choice.
As you can see, the background color of the box is only changed after releasing the mouse in the colorpicker box or the slider.

ColorPicker with given values

In this example, the ColorPicker control is created with a given value by providing the parameter colorString. The color values passed to this parameter can be a color name like 'darkred', a RGB-value like rgb(100,100,100), a HSV-value like hsv10,10,10 or a HEX value in short or long format (#af1 or #aaff11).
The event liveChange is used for evaluating the user choice. The background color of the box is changed during the movement of the mouse in the colorpicker box or the slider.

Keyboard Support

It is possible to navigate between the input fields and the slider using Tab. When the slider is focused, the slider value can be changed using RightArrow, LeftArrow, DownArrow, UpArrow, Pos1 and End.

API Documentation

See API documentation