Object Constructor

var myColorPicker = new dhtmlXColorPicker({
    parent:         "c1",
    input:          "b1",
    target_color:   "cv1",
    target_value:   "v1",
    color:          "#0000ff",
    custom_colors:  ["#00f0f0",[22,66,77],"rgb(255,24,238)"],
    hide:           true,
    closeable:      false


  • parent - (string or object) id of HTML element which will be used as parent ( or object itself ), mandatory
  • input - (string|object) the area to which ColorPicker is linked (linkTo())
  • target_color - (string|object) the area (or its id) that will be colored into the chosen color
  • target_value - (string|object) the value of the chosen color
  • color - (string) the color initially set in ColorPicker (setColor())
  • custom_colors - (string|array|boolean) true to show a block of predefined custom colors, to fill the block set a string|array of colors
  • hide - (boolean) the default value is false, if true - the container is initially hidden and will appear on clicking the element specified in the "input" parameter or after calling the method show()
  • skin - (string) "dhx_skyblue","dhx_web","dhx_terrace"
  • closeable - (boolean) set to false to cancel colorpicker closing by button "Cancel" click
<div id="my_picker_here"></div>
    //common init code
    var myColorPicker = new dhtmlXColorPicker("my_picker_here");

Colorpicker can also be initialized for several inputs at once. There are two variants of such initialization. You may use one of the snippets below:

<input type="text" id="inp1"/>
<input type="text" id="inp2"/>
<input type="text" id="inp3"/>
    //common init code
    var myColorPicker = new dhtmlXColorPicker(["inp1","inp2","inp3"]);


myColorPicker = new dhtmlXColorPicker([
       input: "button1",
       target_color: "cv1",
       target_value: "inp1",
       color: "#05ff50"
       input: "button2",
       target_color: "cv2",
       target_value: "inp2",
       custom_colors: true
       input: "button3",
       target_color: "cv3",
       target_value: "inp3",
       color: "#f5005f",
       custom_colors: true
Back to top