Skip to main content

Work with ColorPicker

The API of ColorPicker helps you control the functionality of the component through a set of handy methods.

Setting/getting selected color#

You can select a certain color in the ColorPicker via the setValue() method. It takes as a parameter the code of a color from the palette in the Hex format.


Related sample: Colorpicker. Set Value

It is also possible to get the code of a color selected in the color picker using the getValue() method.

colorpicker.getValue(); // -> "#F9E6AD"

Setting/getting custom colors#

To set custom colors that will be displayed at the bottom of the palette, make use of the setCustomColors() method. It takes an array with custom colors as a parameter.


Related sample: Colorpicker. Set Custom Colors

To get a collection of selected custom colors, use the getCustomColors() method. It returns selected colors as an array of strings in the Hex format.

colorpicker.getCustomColors();// -> ["#f2f2f2","#8ac5d9","#ec9875","#7a8523"]

Setting/getting current mode#

By default, ColorPicker is rendered in the "palette" mode. There is also the "picker" view in the component which is shown when a user selects a custom color. You can choose what view should be shown with the help of the setCurrentMode() method. It takes the name of the mode to show as a parameter.


Related sample: Colorpicker. Set Current Mode

To get the current view of ColorPicker, make use of the getCurrentMode() method. It returns a string with the name of the view: "palette" or "picker".

colorpicker.getCurrentMode();// -> "palette"

Setting focus on a color#

To set focus on a certain color in the palette, make use of the setFocus() method. As a parameter it takes a string with the code of a color (in the Hex format) to set focus on.


Related sample: Colorpicker. Set Focus