<p>Vue ColorPicker is an input component to select a color. 
It supports Vue 3 with <a target="_blank" href="https://primefaces.org/primevue/showcase">PrimeVue 3</a> and Vue 2 with <a target="_blank" href="https://primefaces.org/primevue/showcase-v2">PrimeVue 2</a>.</p>
<h3 id="setup">Setup</h3>
<p>Refer to PrimeVue <a target="_blank" href="https://primefaces.org/primevue/showcase/#/setup">setup documentation</a> for download and installation steps for your environment such as Vue CLI, Vite or browser.</p>
<h3 id="import">Import</h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> ColorPicker <span class="hljs-keyword">from</span> <span class="hljs-string">'primevue/colorpicker'</span>;
</code></pre>
<h3 id="getting-started">Getting Started</h3>
<p>A model can be bound using the standard v-model directive. Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb".</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">ColorPicker</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"color"</span> /&gt;</span>
</code></pre>
<pre><code class="lang-js"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    data() {
        <span class="hljs-keyword">return</span> {
            <span class="hljs-attr">color</span>: <span class="hljs-string">'1976D2'</span>
        }
    }
}
</code></pre>
<h3 id="inline-and-overlay">Inline and Overlay</h3>
<p>ColorPicker is displayed as an overlay with a preview option by default where second alternative is the inline mode.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">ColorPicker</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"color"</span> <span class="hljs-attr">:inline</span>=<span class="hljs-string">"true"</span> /&gt;</span>
</code></pre>
<h3 id="theming">Theming</h3>
<p>ColorPicker supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primevue/showcase/#/theming">Designer</a> tool.</p>
<h3 id="resources">Resources</h3>
<p>Visit the PrimeVue <a target="_blank" href="https://primefaces.org/primevue/showcase/#/colorpicker">ColorPicker</a> showcase for demos and documentation.</p>


Vue ColorPicker is an input component to select a color. 
It supports Vue 3 with [PrimeVue 3](https://primefaces.org/primevue/showcase) and Vue 2 with [PrimeVue 2](https://primefaces.org/primevue/showcase-v2).

### Setup

Refer to PrimeVue [setup documentation](https://primefaces.org/primevue/showcase/#/setup) for download and installation steps for your environment such as Vue CLI, Vite or browser.

### Import

```js
import ColorPicker from 'primevue/colorpicker';
```

### Getting Started

A model can be bound using the standard v-model directive. Default color format to use in value binding is "hex" and other possible values are "rgb" and "hsb".

```html
<ColorPicker v-model="color" />
```

```js
export default {
    data() {
        return {
            color: '1976D2'
        }
    }
}
```

### Inline and Overlay

ColorPicker is displayed as an overlay with a preview option by default where second alternative is the inline mode.

```html
<ColorPicker v-model="color" :inline="true" />
```

### Theming

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

### Resources

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

Vue3 ColorPicker

Setup

Import

Getting Started

Inline and Overlay

Theming

Resources