🌏 Translated with the assistance of DeepSeek and ChatGPT

ColorPicker

Pick a color you like.

Considering the poor matching effect with the selected color, ColorPicker does not have focus and hover border effects.

Basic Usage

modelValue is a color string value, and color is a color object value. Passing at least one of these two values enters controlled mode. If neither is passed or both are undefined, it becomes uncontrolled mode. In this case, you can pass the defaultValue and defaultColor props as default values.

rgb(151, 0, 255, 0.75)

rgb(151, 0, 255, 0.75)

rgb(151, 0, 255, 0.75)
{ "format": "rgb", "color": { "r": 151, "g": 0, "b": 255, "a": 191 } }

Hide source code

Color Formats

The component currently supports RGB, HEX, HSV, HSL, and HWB color formats.

RGB

rgb(0, 255, 68, 0.75)

hsl(136, 100%, 50%, 0.75)

Hide source code

Show Opacity

The component supports setting whether the color includes opacity via includeAlpha.

Include Alpha

rgb(61, 190, 255)

hwb(200, 23.92%, 0%, 0.75)

Hide source code

Preset Colors

The preset prop provides preset color options.

rgb(255, 163, 0, 1)

Hide source code

Size and Shape

rgb(153, 31, 80, 1)

rgb(191, 38, 99, 1)

rgb(230, 46, 119, 1)

Hide source code

Icon Display

Hide source code

More Configurations

ColorPicker also has some features of the Input component.

Disabled, Readonly

rgb(255, 255, 255, 1)

rgb(255, 255, 255, 1)

Composite

Color:

rgb(255, 255, 255, 1)

Label:

Status

rgb(255, 255, 255, 1)

rgb(255, 255, 255, 1)

rgb(255, 255, 255, 1)

rgb(255, 255, 255, 1)

Expose

rgb(255, 255, 255, 1)

Hide source code

API

ColorPickerProps

Attribute	Type	Optional	Default	Description	Version
modelValue	string | null	True		The string value of the color picker (controlled mode), supports v-model.	0.2.0
defaultValue	string | null	True		The default string value of the color picker (uncontrolled mode).	0.2.0
color	ColorValue | null	True		The object value of the color picker (controlled mode), supports v-model.	0.2.0
defaultColor	ColorValue | null	True		The default object value of the color picker (uncontrolled mode).	0.2.0
mode	'hex' | 'rgb' | 'hsv' | 'hsl' | 'hwb'	True	'rgb'	The color format of the color picker.	0.2.0
includeAlpha	boolean	True	true	Whether to include alpha transparency.	0.2.0
preset	string[]	True		Preset colors.	0.2.0
disabled	boolean	True	false	Whether it is disabled.	0.2.0
readonly	boolean	True	false	Whether it is read-only.	0.2.0
size	'medium' | 'large' | 'small'	True	'medium'	Auto-fill input size.	0.2.0
shape	'medium' | 'large' | 'small'	True	'rect'	Auto-fill input shape.	0.2.0
showIcon	boolean	True	true	Whether to display the icon.	0.2.0
borderRadius	NumberOrPercentage | NumberOrPercentage[]	True		Border radius, higher priority than shape, consistent with CSS border-radius behavior; single value or array of length 1 → all four corners take effect simultaneously; array of length 2 → [top-left & bottom-right, top-right & bottom-left]; array of length 3 → [top-left, top-right & bottom-left, bottom-right]; array of length 4 → applied clockwise to each corner.	0.2.0
status	'success' | 'warning' | 'error' | 'normal'	True	'normal'	Form validation status.	0.2.0
autofocus	boolean	True	false	Native <input> autofocus attribute.	0.2.0
dropdownDestroyOnHide	boolean	True	false	Whether the dropdown panel is destroyed when hidden.	0.2.0
pollSizeChange	boolean	True	false	Enable polling for component size changes, may affect performance.	0.2.0
dropdownProps	Omit<PopoverProps, 'visible' | 'content'> & EmitEvent<PopoverEvents>	True		Properties of the dropdown selection panel.	0.2.0

ColorPickerEvents

Event	Parameter	Description	Version
update:modelValue	value: string	Callback for updating modelValue.	0.2.0
update:color	value: ColorValue	Callback for updating color.	0.2.0
change	colorString: string, colorWithModel: ColorWithModel, event?: Event	Callback when the color changes.	0.2.0
blur	event: FocusEvent	Callback when the auto-fill input loses focus.	0.2.0
focus	event: FocusEvent	Callback when the auto-fill input gains focus.	0.2.0
dropdownOpen		Callback when the dropdown panel is shown.	0.2.0
dropdownClose		Callback when the dropdown panel is closed.	0.2.0

ColorPickerExpose

Attribute	Type	Optional	Default	Description	Version
focus	() => void	False		Focus the current control.	0.2.0
blur	() => void	False		Blur the current control.	0.2.0

ColorValue, ColorWithModel

export type ColorValue = {
	format: 'rgb' | 'hsv' | 'hsl' | 'hwb'
	color: RgbaColor | HslaColor | HsvaColor | HwbaColor
}

export type ColorWithModel = {
	rgb: RgbaColor
	hsl: HslaColor
	hwb: HwbaColor
	hsv: HsvaColor
}

export type RgbaColor = { r: number; g: number; b: number; a: number }
export type HsvaColor = { h: number; s: number; v: number; a: number }
export type HslaColor = { h: number; s: number; l: number; a: number }
export type HwbaColor = { h: number; w: number; b: number; a: number }

EmitEvent

export type EmitEvent<T extends Record<string, any>> = {
	[K in keyof T as `on${Capitalize<K & string>}`]?: (...args: T[K]) => void
}

NumberOrPercentage

export type NumberOrPercentage = number | `${number}%`