ColorPicker is an input component to select a color.

import ColorPicker from 'primevue/colorpicker';

ColorPicker is used as a controlled input with v-model property.

<ColorPicker v-model="color" />

ColorPicker is displayed as a popup by default, add inline property to customize this behavior.

<ColorPicker v-model="color" inline />

Default color format to use in value binding is hex and other possible values can be rgb and hsb using the format property.


<ColorPicker v-model="colorHEX" inputId="cp-hex" format="hex" class="mb-3" />
<ColorPicker v-model="colorRGB" inputId="cp-rgb" format="rgb" class="mb-3" />
<ColorPicker v-model="colorHSB" inputId="cp-hsb" format="hsb" class="mb-3" />

When disabled is present, the element cannot be edited and focused.

<ColorPicker v-model="color" disabled />

Compatibility with popular Vue form libraries.

VeeValidate is a popular library for handling forms in Vue.


    <div class="card flex justify-content-center">
        <form @submit="onSubmit" class="flex flex-column align-items-center gap-2">
            <ColorPicker v-model="value" :class="{ 'p-invalid': errorMessage }" aria-describedby="cp-error" />
            <small class="p-error" id="cp-error">{{ errorMessage || '&nbsp;' }}</small>
            <Button type="submit" label="Submit" />
        <Toast />

Following is the list of structural style classes, for theming classes visit theming page.

p-colorpickerContainer element.
p-colorpicker-overlayContainer element in overlay mode.
p-colorpicker-previewPreview 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.

Screen Reader

Specification does not cover a color picker yet and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen readers. In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats.

Closed State Keyboard Support of Popup ColorPicker

tabMoves focus to the color picker button.
spaceOpens the popup and moves focus to the color slider.

Popup Keyboard Support

enterSelects the color and closes the popup.
spaceSelects the color and closes the popup.
escapeCloses the popup, moves focus to the input.

Color Picker Slider

arrow keysChanges color.

Hue Slider

up arrowdown arrowChanges hue.