ColorPicker

ColorPicker is an input component to select a color.

Inline

Overlay

Import via Module


import { ColorPicker } from 'primereact/colorpicker';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/colorpicker/colorpicker.min.js"></script>

Getting Started

ColorPicker is used as a controlled input component with value and onChange properties.


<ColorPicker value={color} onChange={(e) => setColor(e.value)} />

Formats

Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb". Example below has 3 colorpickers having default values with different formats.


<ColorPicker value={color1} onChange={(e) => setColor1(e.value)} />

<ColorPicker format="rgb" value={color2} onChange={(e) => setColor2(e.value)} />

<ColorPicker format="hsb" value={color3} onChange={(e) => setColor3(e.value)}/>

Properties

Name	Type	Default	Description
id	string	null	Unique identifier of the component.
value	any	null	Value of the component.
style	string	null	Inline style of the component.
className	string	null	Style class of the component.
defaultColor	string	ff0000	Default color to display when value is null.
inline	boolean	false	Whether to display as an overlay or not.
format	string	hex	Format to use in value binding, supported formats are "hex", "rgb" and "hsb".
appendTo	DOM element \| string	document.body	DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The self value is used to render a component where it is located.
disabled	boolean	false	When present, it specifies that the component should be disabled.
tabIndex	number	null	Index of the element in tabbing order.
inputId	string	null	Identifier of the focus input to match a label defined for the dropdown.
tooltip	any	null	Content of the tooltip.
tooltipOptions	object	null	Configuration of the tooltip, refer to the tooltip documentation for more information.
transitionOptions	object	null	The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.

Events

Name	Parameters	Description
onChange	value: Selected color value whose type depends on the format.	Callback to invoke when a color is selected.
onShow	-	Callback to invoke when overlay panel becomes visible.
onHide	-	Callback to invoke when overlay panel becomes hidden.

Styling

Following is the list of structural style classes

Name	Element
p-colorpicker	Container element.
p-colorpicker-overlay	Container element in overlay mode.
p-colorpicker-preview	Preview input in overlay mode.
p-colorpicker-panel	Panel element of the colorpicker.
p-colorpicker-content	Wrapper that contains color and hue sections.
p-colorpicker-color-selector	Color selector container.
p-colorpicker-color	Color element.
p-colorpicker-color-handle	Handle of the color element.
p-colorpicker-hue	Hue slider.
p-colorpicker-hue-handle	Handle of the hue slider.