PrimeFaces ColorPicker Example

ColorPicker is an input component with a color palete, where it’s value should be a hex string. ColorPicker has two modes, default mode is popup and other available option is inline. Inline¬†mode displays the picker directly into the view.

1. ColorPicker Tag Info

ColorPicker General Info

2. ColorPicker Tag Attributes

ColorPicker Attribute

ColorPicker Attribute

3. The View


<html xmlns=""
		<script name="jquery/jquery.js" library="primefaces"></script>
		<h:form prependId="false">
			<h1>JavaBeat Primefaces Example</h1>
			<h2>Primefaces - ColorPicker </h2>
			<p:colorPicker value="#{colorPicker.color}" mode="inline"></p:colorPicker>
			#{' '}
			<h:commandButton value="Display" action="#{colorPicker.action}"></h:commandButton>
			#{' '}
			<h:outputText value="#{colorPicker.color}"></h:outputText>

4. Managed Bean

package net.javabeat.primefaces;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
public class ColorPicker {

	private String color;

	public String getColor() {
		return color;

	public void setColor(String color) {
		this.color = color;

	public String action(){
		return "";

5. Primefaces ColorPicker Demo

The below snapshot shows you the using of colorPicker component.
ColorPicker Demo

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

Share this post with your friends!