lara-light-indigo

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
NameTypeDefaultDescription
idstringnullUnique identifier of the component.
valueanynullValue of the component.
stylestringnullInline style of the component.
classNamestringnullStyle class of the component.
defaultColorstringff0000Default color to display when value is null.
inlinebooleanfalseWhether to display as an overlay or not.
formatstringhexFormat to use in value binding, supported formats are "hex", "rgb" and "hsb".
appendToDOM element | stringdocument.bodyDOM 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.
disabledbooleanfalseWhen present, it specifies that the component should be disabled.
tabIndexnumbernullIndex of the element in tabbing order.
inputIdstringnullIdentifier of the focus input to match a label defined for the dropdown.
tooltipanynullContent of the tooltip.
tooltipOptionsobjectnullConfiguration of the tooltip, refer to the tooltip documentation for more information.
transitionOptionsobjectnullThe properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
Events
NameParametersDescription
onChangevalue: 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

NameElement
p-colorpickerContainer element.
p-colorpicker-overlayContainer element in overlay mode.
p-colorpicker-preview Preview input in overlay mode.
p-colorpicker-panelPanel element of the colorpicker.
p-colorpicker-contentWrapper that contains color and hue sections.
p-colorpicker-color-selectorColor selector container.
p-colorpicker-colorColor element.
p-colorpicker-color-handleHandle of the color element.
p-colorpicker-hueHue slider.
p-colorpicker-hue-handleHandle of the hue slider.
Dependencies

None.

Component Scale

Input Style

Ripple Effect

Free Themes

Built-in component themes created by the PrimeReact Theme Designer.

Bootstrap
Blue
Purple
Blue
Purple
Material Design
Indigo
Deep Purple
Indigo
Deep Purple
Material Design Compact
Indigo
Deep Purple
Indigo
Deep Purple
Tailwind
Tailwind Light
Fluent UI
Blue
PrimeOne Design - 2022 NEW
Lara Indigo
Lara Blue
Lara Purple
Lara Teal
Lara Indigo
Lara Blue
Lara Purple
Lara Teal
PrimeOne Design - 2021
Saga Blue
Saga Green
Saga Orange
Saga Purple
Vela Blue
Vela Green
Vela Orange
Vela Purple
Arya Blue
Arya Green
Arya Orange
Arya Purple
Premium Themes

Premium themes are only available exclusively for PrimeReact Theme Designer subscribers and therefore not included in PrimeReact core.

Soho Light
Soho Dark
Viva Light
Viva Dark
Mira
Nano

Legacy Free Themes

Nova
Nova Alt
Nova Accent
Luna Blue
Luna Green
Luna Amber
Luna Pink
Rhea

Premium Create-React-App Templates

Beautifully crafted premium create-react-app application templates by the PrimeTek design team.

Sakai
Atlantis
Freya
Ultima
Diamond
Sapphire
Serenity
Babylon
Avalon
Apollo
Roma