Color Picker

A color picker with saturation panel, hue slider, alpha slider, hex input, and preset colors.

#3b82f6

<script setup>
import { ref } from 'vue'
const color = ref('#3b82f6')
</script>

<template>
  <VxColorPicker v-model="color" />
</template>

Without Input

<template>
  <VxColorPicker v-model="color" :show-input="false" />
</template>

With Alpha

#3b82f680

#3b82f680

<template>
  <VxColorPicker v-model="color" show-alpha />
</template>

Preset Colors

#ef4444

<script setup>
const presets = ['#000000', '#ef4444', '#f97316', '#22c55e', '#3b82f6', '#8b5cf6', '#ec4899']
</script>

<template>
  <VxColorPicker v-model="color" :presets="presets" />
</template>

RGB Format

rgb(59, 130, 246)

#3b82f6

<template>
  <VxColorPicker v-model="color" format="rgb" />
</template>

HSL Format

hsl(217, 91%, 60%)

#3b82f6

<template>
  <VxColorPicker v-model="color" format="hsl" />
</template>

Sizes

#8b5cf6

#8b5cf6

#8b5cf6

<template>
  <VxColorPicker size="sm" />
  <VxColorPicker />
  <VxColorPicker size="lg" />
</template>

Custom Trigger

Use triggerClass and triggerStyle to customize the trigger's height, border-radius, or any style.

#8b5cf6

#ef4444

#22c55e

<template>
  <VxColorPicker :trigger-style="{ height: '48px', borderRadius: '24px' }" />
  <VxColorPicker :trigger-style="{ height: '40px', borderRadius: '0px' }" />
  <VxColorPicker trigger-class="my-custom-trigger" />
</template>

Disabled

#f97316

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

Props

Prop	Type	Default	Description
modelValue	string	'#000000'	Color value (v-model)
format	'hex' | 'rgb' | 'hsl'	'hex'	Output format
disabled	boolean	false	Disable picker
showAlpha	boolean	false	Show alpha slider
showInput	boolean	true	Show hex input
presets	string[]	—	Preset color swatches
size	'sm' | 'default' | 'lg'	'default'	Trigger size
triggerClass	string | string[] | Record<string, boolean>	''	Custom CSS class on trigger
triggerStyle	Record<string, string>	—	Inline styles on trigger (height, borderRadius, etc.)

Events

Event	Type	Description
update:modelValue	(value: string) => void	Color changed
change	(value: string) => void	Color changed