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");

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"]);

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 view

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 setView() method. It takes the name of the view to show as a parameter.

colorpicker.setView("picker");

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

colorpicker.setView(view);
 
colorpicker.getView();
// -> "palette"

Setting focus on a color

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

colorpicker.focusValue("#BDF0E9");