Skip to main content

​
Color Picker

The VColorPicker component allows users to select colors using a visual color canvas, sliders, and various input modes.

​
Usage

<template>
  <v-color-picker
    v-model="color"
    mode="rgba"
  />
</template>

<script setup>
import { ref } from 'vue'

const color = ref('#FF5252')
</script>

​
API

​
Props

​
modelValue
string | object
The selected color value. Can be a color string or object.
​
mode
string
default:"rgba"
Color input mode. Options: rgba, rgb, hsla, hsl, hexa, hex.
​
modes
string[]
default:"['rgba', 'rgb', 'hsla', 'hsl', 'hexa', 'hex']"
Available color modes that users can switch between.
​
canvasHeight
string | number
default:"150"
Height of the color canvas in pixels.
​
disabled
boolean
default:"false"
Disables the color picker.
​
dotSize
number | string
default:"10"
Size of the color selector dot on the canvas.
​
hideCanvas
boolean
default:"false"
Hides the color selection canvas.
​
hideSliders
boolean
default:"false"
Hides the hue and alpha sliders.
​
hideInputs
boolean
default:"false"
Hides the color value input fields.
​
readonly
boolean
default:"false"
Makes the color picker read-only.
​
showSwatches
boolean
default:"false"
Displays color swatches for quick selection.
​
swatches
Color[][]
Array of color swatches to display.
​
swatchesMaxHeight
number | string
default:"150"
Maximum height of the swatches section.
​
hideEyeDropper
boolean
default:"false"
Hides the eye dropper tool.
​
eyeDropperIcon
string
Custom icon for the eye dropper tool.

​
Events

​
update:modelValue
(color: any) => void
Emitted when the color value changes.
​
update:mode
(mode: string) => void
Emitted when the color mode changes.

​
Examples

​
With Swatches

<template>
  <v-color-picker
    v-model="color"
    show-swatches
    :swatches="swatches"
  />
</template>

<script setup>
import { ref } from 'vue'

const color = ref('#FF5252')
const swatches = [
  ['#FF0000', '#AA0000', '#550000'],
  ['#00FF00', '#00AA00', '#005500'],
  ['#0000FF', '#0000AA', '#000055']
]
</script>

​
Compact Mode

<template>
  <v-color-picker
    v-model="color"
    hide-canvas
    hide-sliders
    show-swatches
  />
</template>

​
HSL Mode

<template>
  <v-color-picker
    v-model="color"
    mode="hsl"
    :modes="['hsl', 'hsla']"
  />
</template>

​
Disabled State

<template>
  <v-color-picker
    v-model="color"
    disabled
  />
</template>

Build docs developers (and LLMs) love

Get started for freeTalk to us