Color Picker
A fully-featured color picker component with support for multiple color formats, alpha channel, and preset swatches.
Source code
Click to see the source code for this component on GitHub.
Installation
Usage
Basic
Selected color: #FF5833
With Alpha Channel
Enable alpha/opacity control by setting show-alpha to true.
Selected color: #FF583380
Multiple Formats
The color picker supports HEX, RGB, HSL, and HSV formats. Users can toggle between formats using the dropdown selector.
HEX: #3b82f6
RGB: rgb(59, 130, 246)
HSL: hsl(217, 91%, 60%)
With Preset Swatches
Add preset color swatches for quick selection.
Selected color: #3B82F6
Full Featured Showcase
See all features in action: alpha channel, format toggle, input field, and preset swatches.
Full Featured Color Picker
Color Information
Current Format:hex
Value:#3B82F6
HEX:#3b82f6
RGB:rgb(59, 130, 246)
HSL:hsl(217, 91%, 60%)
Preview
Available Presets
In a Popover
Combine with a Popover for a compact color picker trigger.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | string | "#ff5733" | The current color value. Accepts any valid color string supported by colord. |
format | "hex" | "rgb" | "hsl" | "hsv" | "hex" | Output format used for update:modelValue and the input field display. |
showAlpha | boolean | false | Enables alpha/opacity editing and forces HEX output to #rrggbbaa when format="hex". |
showFormatToggle | boolean | true | Shows the format dropdown (HEX/RGB/HSL/HSV). |
showInput | boolean | true | Shows the text input that displays/accepts the current color string. |
showPresets | boolean | false | Shows preset swatches. |
presets | string[] | [] | List of preset colors. |
class | HTMLAttributes["class"] | undefined | Additional classes for the root wrapper. |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | (value: string) | Fired whenever the internal color changes. The emitted string matches the selected format. If showAlpha is enabled and format="hex", the output is always #rrggbbaa (lowercase). |
update:format | (format: "hex" | "rgb" | "hsl" | "hsv") | Fired when the format selection changes. Supports v-model:format. |
Slots
| Slot | Description |
|---|---|
top | Content rendered above the main UI. |
sv | Replace the default SV (saturation/value) component. |
hue | Replace the default hue slider component. |
alpha | Replace the default alpha slider component. |
controls | Replace preview + format + input area. |
presets | Replace preset swatches area. |
default | Rendered at the bottom inside the root (after presets). |
Dependencies
This component uses the colord library for color parsing and conversion between different formats.