ColorPicker

ColorPicker is a color selection input with a swatch trigger, native color wheel, hex text input, and optional preset swatches.

ExamplesCodeUsageChangelog

Basic usage

Brand color

Value: #2563eb

Tailwind v4

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

<ColorPicker v-model="color" label="Brand color" />

With presets

Theme color

Tailwind v4

<ColorPicker
  v-model="color"
  label="Theme color"
  :presets="['#ef4444', '#22c55e', '#2563eb', '#7c3aed']"
/>

Without hex input

Tailwind v4

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

Disabled

Disabled

Tailwind v4

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

Props

Prop	Type	Default	Description
modelValue	string	—	Hex color value e.g. #FF5733 (use with v-model)
disabled	boolean	false	Disables the picker
label	string	—	Label shown above the swatch
showInput	boolean	true	Show hex text input alongside the swatch
presets	string[]	[]	Array of preset hex colors shown as swatches in the popover

Events

Event	Payload	Description
update:modelValue	string	Emitted when a color is selected or the hex input changes to a valid hex