Color Picker Panel

A panel color picker with Hue and optional Alpha controls. You can also paste #RGB/#RRGGBB or rgb()/rgba() into the input to sync back.

Basic

html

<template>
  <dk-color-picker-panel v-model="value" />
</template>

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

const value = ref('#409EFF')
</script>

展开

html

<template>
  <dk-color-picker-panel v-model="value" show-alpha format="rgb" />
</template>

展开

html

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

展开

Name	Description	Type	Default
model-value / v-model	binding value	string	''
disabled	disabled state	boolean	false
show-alpha	show alpha slider	boolean	false
format	output format	'hex' \| 'rgb' \| 'hsl'	'hex'
width	panel width	string	'280px'

Name	Description	Params
update:modelValue	v-model update	(value: string)
active-change	emitted while dragging	(value: string)
change	emitted on drag end / input sync	(value: string)
update:rgba	RGBA update	(rgba: { r: number; g: number; b: number; a: number })