Work with ColorPicker

The Colorpicker API helps you control the component through a set of methods.

Setting/getting selected color

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

colorpicker.setValue("#F9E6AD");

Related sample: Colorpicker. Set value

You can also get the code of the color selected in Colorpicker with the getValue() method.

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

Setting/getting custom colors

Use the setCustomColors() method to set custom colors that appear at the bottom of the palette. It takes an array of custom colors as a parameter.

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

Related sample: Colorpicker. Set custom colors

Use the getCustomColors() method to get the selected custom colors. It returns the 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

The default Colorpicker mode is "palette". The component also has the "picker" mode that appears when a user selects a custom color. Use the setCurrentMode() method to choose the mode to show. It takes the mode name as a parameter.

colorpicker.setCurrentMode("picker");

Related sample: Colorpicker. Set current mode

Use the getCurrentMode() method to get the current Colorpicker mode. It returns a string with the mode name: "palette" or "picker".

colorpicker.setCurrentMode(mode);

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

Setting focus on a color

Use the setFocus() method to set focus on a color in the palette. It takes a string with the color code in the Hex format as a parameter.

colorpicker.setFocus("#BDF0E9");

Related sample: Colorpicker. Set focus