ColorPicker
Used for selecting and setting colors. Supports multiple color modes (HEX, RGB, HSL), with alpha transparency control and predefined colors.
Showcase
ColorPicker provides a full-featured interactive demo. You can toggle alpha support and switch between sizes in real time.
Basic Usage
Basic color picker functionality with HEX format two-way binding.
Alpha Transparency
Enable show-alpha to support alpha channel adjustment, automatically switching to RGBA format.
Predefined Colors
Display a set of preset quick-select colors at the bottom of the panel.
Disabled
The color picker becomes non-interactive when the disabled prop is set.
Advanced Features
1. Intelligent Contrast Preview
The panel automatically calculates relative luminance between the selected color and background according to WCAG standards, providing real-time accessibility suggestions in the top-right corner to ensure designs meet visual accessibility requirements.
2. Cross-Platform EyeDropper
Based on the modern browser native EyeDropper API, it supports picking colors from anywhere on the screen (not limited to within the browser window), providing production-level support for professional design scenarios.
3. Bidirectional Input Field
The value display area at the bottom has been upgraded to a responsive input field. You can directly paste HEX or RGB codes from designers, and the component will instantly parse and locate the color.
Use in Nuxt
YhColorPicker is perfectly adapted for Nuxt 3/4. Under the Nuxt architecture, all related APIs (including EyeDropper detection) have been optimized for Client-Only environments, ensuring zero SSR warnings.
API
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| v-model | Binding value | string | — |
| show-alpha | Whether to support alpha | boolean | false |
| predefine | Predefined color list | string[] | [] |
| size | Size | 'large' | 'default' | 'small' | 'default' |
| disabled | Whether disabled | boolean | false |
| popper-class | Panel custom class | string | — |
| theme-overrides | Component-level theme overrides | ComponentThemeVars | undefined |
Events
| Event Name | Description | Parameters |
|---|---|---|
| change | Triggered when a color is confirmed | (val: string) |
| active-change | Triggered when color changes in real-time within the panel | (val: string) |
Slots
This component does not expose component slots.
Expose
| Name | Description | Type |
|---|---|---|
visible | Current panel visibility state. | Ref<boolean> |
togglePopper | Toggle the panel open state. | () => void |
handleClear | Clear the current color value. | () => void |
handleConfirm | Confirm the current color value. | () => void |
Theme Variables
| Variable | Description | Default |
|---|---|---|
--yh-color-picker-width | Component base width | 60px |
--yh-color-picker-panel-width | Expanded panel width | 280px |
--yh-color-picker-border-radius | Border radius | 12px |
Type Exports
| Name | Description |
|---|---|
YhColorPickerProps | Props type for YhColorPicker |
YhColorPickerEmits | Emits type for YhColorPicker |
YhColorPickerSlots | Slots type for YhColorPicker |
YhColorPickerExpose | Expose type for YhColorPicker |
YhColorPickerInstance | Public instance type for YhColorPicker |