Colorbox is a color picker component that may be implemented as a stand-alone component, or embedded as a menu item.

The color picker supports picking a color from a discrete palette, or choosing a color from a continuous dial.

<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<hlayout apply="demo.input.color_picker.ColorPickerController">
	<style>
		.win1 .z-window-embedded-cnt { padding: 0; }
	</style>
	<window id="win1" border="normal" title="Color Picker in Menu" height="180px" width="200px" sclass="win1">
		<menubar id="menubar">
			<menu label="Menu">
				<menupopup>
					<menu id="colorMenu" label="Color Picker" />
				</menupopup>
			</menu>
		</menubar>
	</window>
	<window id="win2" border="normal" title="Stand-alone Color Picker" height="180px" width="200px">
		<colorbox id="colorPicker" width="30px" height="25px" />
	</window>
</hlayout>

package demo.input.color_picker;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.InputEvent;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zkex.zul.Colorbox;
import org.zkoss.zul.Menu;
import org.zkoss.zul.Window;

public class ColorPickerController extends SelectorComposer<Component> {
	@Wire
	private Window win1;
	
	@Wire
	private Window win2;
	
	@Wire("#win1 #colorMenu")
	private Menu colorMenu;
	
	@Wire("#win2 #colorPicker")
	private Colorbox colorPicker;
	
	@Override
	public void doAfterCompose(Component comp) throws Exception {
		super.doAfterCompose(comp);
		
		colorMenu.setContent("#color=" + "#029BCB");
		colorPicker.setColor("#029BCB");
	}
	
	@Listen("onChange = #win1 #colorMenu")
	public void onLeftColorChanged(InputEvent event) {
		win1.setContentStyle("background-color: " + event.getValue());
	}

	@Listen("onChange = #win2 #colorPicker")
	public void onRightColorChanged(Event event) {
		win2.setContentStyle("background-color: " + colorPicker.getColor());
	}
}