The API of ColorPicker helps you control the functionality of the component through a set of handy methods.
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"
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"]
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"
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
Back to top