Skip to main content


DHTMLX Colorpicker allows you to apply different languages to its interface. You just need to translate the corresponding strings for Colorpicker labels and tooltips and apply a ready locale to the component.

Default locale

The default locale for Colorpicker looks like this:

const en = {
cancel: "Cancel",
select: "Select",
rightClickToDelete: "Right click to delete",
customColors: "Custom colors",
addNewColor: "Add new color"

Custom locale

To use a different locale, your need to:

  • define necessary language settings: provide translations for the labels of colors' elements in all available formats as well as for the buttons:
const de = {
cancel: "Abbrechen",
select: "Wählen",
rightClickToDelete: "Rechtsklick zu entfernen",
customColors: "Seine Farben",
addNewColor: "Neue Farbe hinzufügen"
  • apply the language settings by calling the dhx.i18n.setLocale() method before Colorpicker initialization:
dhx.i18n.setLocale("colorpicker_container", de);
const colorpicker = new dhx.Colorpicker("colorpicker_container");

Related sample: Colorpicker. Localization