Skip to main content


There are two ways of initializing dhtmlxColorPicker: inside a container or inside a popup. Both ways are described below in detail.

In general, to create dhtmlxColorPicker on a page, you need to take the following simple steps:

<!DOCTYPE html><html>    <head>        <title>How to Start with dhtmlxColorPicker</title>                 <script type="text/javascript" src="../../codebase/suite.js"></script>        <link rel="stylesheet" href="../../codebase/suite.css">    </head>    <body>        <div id="colorpicker_container"></div>        <script>            // creating dhtmlxColorPicker             var colorpicker = new dhx.ColorPicker("colorpicker_container",{                // config options            });        </script>    </body></html>

Related sample: Colorpicker. Basic Initialization

Include source files#

Create an HTML file and place full paths to JS and CSS files of the dhtmlxSuite library into the header of the file. The files are:

  • suite.js
  • suite.css
<script type="text/javascript" src="../../codebase/suite.js"></script><link rel="stylesheet" href="../../codebase/suite.css">

Initialize ColorPicker#

You can initialize ColorpIcker in a container or in a popup.

Initialization in a container#

In this case you initialize ColorPicker with the dhx.Colorpicker object constructor. The constructor takes two parameters:

  • the HTML container for ColorPicker,
<div id="colorpicker_container"></div>
  • an object with configuration properties. If this argument is not passed to the constructor, the settings will be default.
// creating dhtmlxColorPickervar colorpicker = new dhx.ColorPicker("colorpicker_container",{   // config options});

Related sample: Colorpicker. Basic Initialization

Initialization in a popup#

This variant presupposes that you create a popup first and then attach a colorpicker into it.

  • use corresponding object constructors to create a colorpicker and a popup objects. Note that in this case null is used instead of container for ColorPicker:
var colorpicker = new dhx.Colorpicker(null, { customColors: ["#f2f2f2"] });var popup = new dhx.Popup();
  • attach the colorpicker to the popup using the attach() method of Popup:
  • use the show() and hide methods of Popup to control when a popup with color picker should be shown/hidden. For example:"showButton");
var colorExample = document.querySelector(".dhx_color-sample");"colorChange", function (color) { = color;    popup.hide();});

Related sample: Colorpicker. Colorpicker Inside Popup

Configuration properties#

The detailed information on ColorPicker configuration options can be found in the Colorpicker API overview article.

Select initial color (optional)#

You can specify the color that should be selected in the palette after ColorPicker initialization with the help of the setValue() method:

var colorpicker = new dhx.ColorPicker({   // config options});colorpicker.setValue("#BDF0E9");

Related sample: Colorpicker. Set Value