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.

colorpicker.setValue("#F9E6AD");

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.

colorpicker.setCustomColors(["#f2f2f2","#8ac5d9","#ec9875","#7a8523"]);

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.setCustomColors(["#f2f2f2","#8ac5d9","#ec9875","#7a8523"]);

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.

colorpicker.setCurrentMode("picker");

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.setCurrentMode(mode);

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.

colorpicker.setFocus("#BDF0E9");

Related sample: Colorpicker. Set focus