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
.
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.
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.
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
.