React ColorPicker is an input component to select a color.
<h3 id="setup">Setup</h3>
Refer to PrimeReact <a target="_blank" href="https://primefaces.org/primereact/showcase/#/setup">setup documentation</a> for download and installation steps for your environment.
<h3 id="import">Import</h3>
<pre><code class="lang-js">import {ColorPicker} from 'primereact/colorpicker';
</code></pre>
<h3 id="getting-started">Getting Started</h3>
ColorPicker is used as a controlled input component with value and onChange properties.
<pre><code class="lang-html">&lt;ColorPicker value={color} onChange={(e) =&gt; setColor(e.value)} /&gt;
</code></pre>
<h3 id="formats">Formats</h3>
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.
<pre><code class="lang-html">&lt;ColorPicker value={color1} onChange={(e) =&gt; setColor1(e.value)} /&gt;

&lt;ColorPicker format="rgb" value={color2} onChange={(e) =&gt; setColor2(e.value)} /&gt;

&lt;ColorPicker format="hsb" value={color3} onChange={(e) =&gt; setColor3(e.value)}/&gt;
</code></pre>
<h3 id="theming">Theming</h3>
ColorPicker supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primereact/showcase/#/theming">Designer</a> tool.
<h3 id="resources">Resources</h3>
Visit the PrimeReact <a target="_blank" href="https://primefaces.org/primereact/showcase/#/colorpicker">ColorPicker</a> showcase for demos and documentation.

React ColorPicker is an input component to select a color.

### Setup

Refer to PrimeReact [setup documentation](https://primefaces.org/primereact/showcase/#/setup) for download and installation steps for your environment.

### Import

```js
import {ColorPicker} from 'primereact/colorpicker';
``` 

### Getting Started

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

```html
<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.

```html
<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)}/>
```

### Theming

ColorPicker supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the [Designer](https://primefaces.org/primereact/showcase/#/theming) tool.

### Resources

Visit the PrimeReact [ColorPicker](https://primefaces.org/primereact/showcase/#/colorpicker) showcase for demos and documentation.