Examples

Standard dialog with color selection by default

var box = BX("color-box");

var picker = new BX.ColorPicker({
	bindElement: box,
	defaultColor: "#000000",
	onColorSelected: function(color, picker) {
    	box.style.backgroundColor = color;
    }
});

picker.open();

Dialog closing processing

var box = BX("color-box");

var picker = new BX.ColorPicker({
	bindElement: box,
	onColorSelected: function(color, picker) {
		box.style.backgroundColor = color;
    },
	popupOptions: {
		offsetTop: 10,
		offsetLeft: 10,
		events: {
			onPopupClose: function() {
				console.log("closed");
			},
			onPopupShow: function() {
				console.log("open");
			}
		}
	}
});

picker.open();

Your palette

var box = BX("color-box");

var picker = new BX.ColorPicker({
	bindElement: box,
	allowCustomColor: false,
	colorPreview: false,
	onColorSelected: function(color, picker) {
		box.style.backgroundColor = color;
	},
	colors: [
		["#ace9fb", "#beedf1", "#9ae1dd"],
		["#fff", "#000", "#def"],
		["#ffbdbc", "#ffcbd8", "#fec5e4"],
		["#c5bbec", "#dbdde0", "#dbf199"]
	]
});

picker.open();

Single object and several management elements

<input type="text" size="10" value="#ffffff" id="input1"> <button id="button1">Select color</button><p>
<input type="text" size="10" value="#000000" id="input2"> <button id="button2"> Select color</button><p>
<input type="text" size="10" value="" id="input3"> <button id="button3"> Select color<button>

(function() {

	"use strict";

	var picker = new BX.ColorPicker({
		bindElement: null,
		defaultColor: "#000000",
		popupOptions: {
			offsetTop: 10,
			offsetLeft: 10,
			angle: true,
			events: {
				onPopupClose: function() {
					console.log("closed");
				},
				onPopupShow: function() {
					console.log("open");
				}
			}
		}
	});

	BX.bind(BX("button1"), "click", onButtonClick);
	BX.bind(BX("button2"), "click", onButtonClick);
	BX.bind(BX("button3"), "click", onButtonClick);

	function onButtonClick(event)
	{
		var target = event.target;
		var input = target.previousElementSibling;

		picker.open({
			selectedColor: BX.type.isNotEmptyString(input.value) ? input.value : null,
			bindElement: target,
			onColorSelected: onColorSelected.bind(input)
		});
	}
	
	function onColorSelected(color, picker)
	{
		this.value = color;
	}
	
})();