Using API

Source
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxcolorpicker.css">
  <script>window.dhx_globalImgPath = "../../codebase/imgs/";</script>
  <script  src="../../codebase/dhtmlxcommon.js"></script>
  <script  src="../../codebase/dhtmlxcolorpicker.js"></script>
<script>var cp;
function init() {
    if (!cp) {
        cp = new dhtmlXColorPicker('cp');
        cp.init();
    } else;
    cp.show();
}</script>
 
 
<input type="button" value="Init" onclick="init();" style="width:100px">
 
<input type="button" value="Set position A" onclick="if (cp) cp.setPosition(390,90);" style="width:100px">
<input type="button" value="Set position B" onclick="if (cp) cp.setPosition(490,80);" style="width:100px">
 
<input type="button" value="Set color A" onclick="if (cp) cp.setColor('#f217f6');" style="width:100px">
<input type="button" value="Set color B" onclick="if (cp) cp.setColor([143,222,12]);" style="width:100px">
 
<input type="button" value="Hide" onclick="if (cp) cp.hide();" style="width:100px">
<input type="button" value="Show" onclick="if (cp) cp.show();" style="width:100px">
<input type="button" value="Close" onclick="if (cp) {cp.close(); cp =null};" style="width:100px">
 
<input type="button" value="Get selected color" onclick="if (cp) {c = cp.getSelectedColor();alert(c[0])};" style="width:150px">
<div id="cp"></div>