The menu component allows the color selection function.

<zk>
	<style>
		.testDiv { height: 147px; width: 147px; }
		.container { border: 1px solid #ccc;border-width: 0 1px;width:451px;}	
	</style>
	<div sclass="container" apply="demo.menu.color_picker_menu.ColorPickerMenuController">
		<menubar width="449px">
			<menu id="color1" label="First Color" content="#color=#999999" />
			<menu label="Others">
				<menupopup>
					<menu id="color2" label="Second Color" content="#color=#ff9933" />
					<menu id="color3" label="Third Color" content="#color=#31548C" />
				</menupopup>
			</menu>
		</menubar>
	</div>
	<separator height="5px" />
	<hlayout spacing="5px">
		<div id="testDiv1" sclass="testDiv" style="background:#999999;"></div>
		<div id="testDiv2" sclass="testDiv" style="background:#ff9933;"></div>
		<div id="testDiv3" sclass="testDiv" style="background:#31548C;"></div>
	</hlayout>
</zk>

package demo.menu.color_picker_menu;

import org.zkoss.zk.ui.Component;
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.zul.Div;

public class ColorPickerMenuController extends SelectorComposer<Component>{

	@Wire
	private Div testDiv1; 
	
	@Wire
	private Div testDiv2; 
	
	@Wire
	private Div testDiv3; 
	
	@Listen("onChange = #color1") 
	public void onColor1Updated(InputEvent event) {
		testDiv1.setStyle("background-color:" + event.getValue() + ";");
	}
	
	@Listen("onChange = #color2") 
	public void onColor2Updated(InputEvent event) {
		testDiv2.setStyle("background-color:" + event.getValue() + ";");
	}
	
	@Listen("onChange = #color3") 
	public void onColor3Updated(InputEvent event) {
		testDiv3.setStyle("background-color:" + event.getValue() + ";");
	}
}