6.11.2. < rich:colorPicker > available since 3.3.1

### Create new RichFaces Documentation Jira issue

Summary
255 characters left
Description
Environment
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.org Community Documentation

- Prev
- Next

### 6.11.2. < rich:colorPicker > available since 3.3.1

expand all

#### 6.11.2.1. Description

The <rich:colorPicker> component lets you visually choose a color or define it in hex, RGB, or HSB input fields.

Figure 6.125. Simple <rich:colorPicker> component

#### 6.11.2.2. Key Features

- Possibility to get color in hex, or RGB color models

- Flat/inline representation

- Highly customizable look and feel

#### 6.11.2.3. Details of Usage

The <rich:colorPicker> component allows you easily select a color or define it in hex, RGB, or HSB input fields. There are two squares in the widget that help you to compare the currently selected color and the already selected color.

The "value" attribute stores the selected color.

The value of the <rich:colorPicker> component could be saved in hex or RGB color models. You can explicitly define a color model in the "colorMode" attribute.

Example:

    ...

    <rich:colorPicker value="#{bean.color}" colorMode="rgb" />

    ...

This is the result:

Figure 6.126. Usage of the "colorMode" attribute.

The <rich:colorPicker> component has two representation states: flat and inline. With the help of the "flat" attribute you can define whether the component is rendered flat.

Example:

    ...

    <rich:colorPicker value="#{bean.color}" flat="true" />

    ...

The component specific event handler "onbeforeshow" captures the event which occurs before the <rich:colorPicker> widget is opened. The "onbeforeshow" attribute could be used in order to cancel this event. See the example below:

    ...

    <rich:colorPicker value="#{bean.color}" onbeforeshow="if (!confirm('Are you sure you want to change a color?')){return false;}" />

    ...

The "showEvent" attribute defines the event that shows <rich:colorPicker> widget. The default value is "onclick".

The <rich:colorPicker> component allows to use the "icon" facet.

You can also customize <rich:colorPicker> rainbow slider ( ) with the help of the "arrows" facet.

    ...

    <rich:colorPicker value="#{bean.color}">

        <f:facet name="icon">

            <h:graphicImage value="/pages/colorPicker_ico.png" />

        </f:facet>

        <f:facet name="arrows">

            <f:verbatim>

                <div style="width: 33px; height: 5px; border: 1px solid #bed6f8; background:none;" />

            </f:verbatim>

        </f:facet>

    </rich:colorPicker>

    ...

This is the result:

Figure 6.127. Usage of the "icon" , and "arrows" facets

#### 6.11.2.4. Reference Data

Table of <rich:colorPicker> attributes.

Table 6.167. Component Identification Parameters

Name | Value
--- | ---
component-type | org.richfaces.ColorPicker
component-class | org.richfaces.component.html.HtmlColorPicker
component-family | org.richfaces.ColorPicker
renderer-type | org.richfaces.ColorPickerRenderer
tag-class | org.richfaces.taglib.ColorPickerTag

Table 6.168. Facets

Facet | Description
--- | ---
arrows | Redefines colorPicker arrows
icon | Redefines colorPicker icon

Table 6.169. Style classes (selectors) with the corresponding skin parameters

Class (selector) name | Description | Skin Parameter | CSS properties mapped
--- | --- | --- | ---
.rich-colorpicker-ext | Defines styles for the component widget | panelBorderColor | border-color
generalBackgroundColor | background-color
generalFamilyFont | font-family
.rich-color-picker-span input | Defines styles for the input field that contains selected color | panelBorderColor | border-color
generalSizeFont | font-size
generalFamilyFont | font-family
.rich-color-picker-ext input | Defines styles for the input field within the component widget | controlTextColor | color
controlBackgroundColor | background-color
.rich-color-picker-ext label | Defines styles for the label within the component widget | generalTextColor | color
generalSizeFont | font-size
generalFamilyFont | font-family
.rich-color-picker-icon | Defines styles for the component icon | panelBorderColor | border-color
.rich-color-picker-color | Defines styles for the color palette | panelBorderColor | border-color
.rich-color-picker-new-color | Defines styles for the already selected color | panelBorderColor | border-color
.rich-color-picker-current-color | Defines styles for the currently selected color | panelBorderColor | border-color
.rich-color-picker-cancel | Defines styles for the "Cancel" button | buttonFontSize | font-size
buttonFamilyFont, generalFamilyFont | font-family
headerTextColor | color
headerBackgroundColor, panelBorderColor | border-color
headerBackgroundColor | background-color
.rich-color-picker-submit | Defines styles for the "Apply" button | buttonFontSize, panelBorderColor | font-size
buttonFamilyFont, generalFamilyFont | font-family
headerTextColor | color
headerBackgroundColor, panelBorderColor | border-color
headerBackgroundColor | background-color
.rich-color-picker-colors-input | Defines styles for the hex, RGB, and HSB input fileds | generalSizeFont | font-size
generalFamilyFont | font-family
generalTextColor | color
panelBorderColor | border-color
controlBackgroundColor | background-color

Table 6.170. Style classes (selectors) without skin parameters

Selector name | Description
--- | ---
.rich-color-picker-span | Defines styles for the wrapper <span> element of the component
.rich-color-picker-wrapper | Defines styles for the wrapper <div> element of a widget
.rich-color-picker-color div div | Defines styles for the color picker icon within the color palette
.rich-color-picker-rainbow | Defines styles for the widget rainbow
.rich-color-picker-rainbow div | Defines styles for the slider of the widget rainbow
.rich-color-picker-hex-wrapper | Defines styles for the wrapper of the region for selecting a color in the hex model
.rich-color-picker-rgb-wrapper | Defines styles for the wrapper of the region for selecting a color in the RGB model
.rich-color-picker-rgb-r | Defines styles for the region for setting red color intensity in the RGB model
.rich-color-picker-rgb-g | Defines styles for the region for setting green color intensity in the RGB model
.rich-color-picker-rgb-b | Defines styles for the region for setting blue color intensity in the RGB model
.rich-color-picker-hsb-wrapper | Defines styles for the wrapper of the region for selecting a color in the HSB color scheme
.rich-color-picker-hsb-h | Defines styles for the region for setting the H value in the HSB color scheme
.rich-color-picker-hsb-s | Defines styles for the region for setting the S value in the HSB color scheme
.rich-color-picker-hsb-b | Defines styles for the region for setting the B value in the HSB color scheme

You can find all necessary information about style classes redefinition in Definition of Custom Style Classes section.

#### 6.11.2.5. Relevant Resources Links

On the component LiveDemo page you can see the example of the <rich:colorPicker> component usage and sources for the given example.

- Prev6.11.1. < rich:calendar > ...
- Top of page
- Front page
- Next6.11.3. < rich:comboBox > ...