For Tailwind CSS v3 docs, click here.

Color Picker

A comprehensive color picker component with support for multiple color formats, accessibility features, and custom swatches.

Install using CLI

npm
pnpm
bun
yarn
npx shadcn-vue@latest add "https://registry.inspira-ui.com/color-picker.json"

Install Manually

Install the dependencies

npm
pnpm
bun
yarn
npm install @uiw/color-convert

Copy and paste the following code

ColorPicker.vue
ObjectColorInput.vue
ContrastRatio.vue
index.ts
API
ColorPicker Props
Prop NameTypeDefaultDescription
valuestring | HsvaColor | HslaColor | RgbaColorundefinedThe current color value in any supported format
type'hsl' | 'hsla' | 'rgb' | 'rgba' | 'hex''hsl'Default color format to display in inputs
swatchesHexColor[][]Array of predefined color swatches
hideContrastRatiobooleanfalseHide the accessibility contrast ratio section
hideDefaultSwatchesbooleanfalseHide the default color swatches
classstring""Additional CSS classes for the popover content
openbooleanfalseControl the open/closed state of the color picker
ColorPicker Events
Event NameTypeDescription
value-change(value: ColorPickerValue) => voidEmitted when the selected color changes
update:open(value: boolean) => voidEmitted when the popover open state changes
ColorPickerValue Type
interface ColorPickerValue {
  hex: string; // Hex color string (e.g., "#ff0000")
  hsl: HslaColor; // HSL color object with h, s, l, a properties
  hsla: HslaColor; // HSLA color object with h, s, l, a properties
  rgb: RgbaColor; // RGB color object with r, g, b, a properties
  rgba: RgbaColor; // RGBA color object with r, g, b, a properties
}

Features
  • Multiple color formats (HEX, HSL, HSLA, RGB, RGBA with alpha channel)
  • Interactive saturation, hue, and alpha sliders
  • Alpha channel support with transparency slider for RGBA/HSLA modes
  • Custom color swatches with default predefined colors
  • Accessibility contrast checker with AA/AAA indicators
Credits
Safari Mockup
An SVG mockup of the Safari browser.
File Upload
A modern file upload component with a 3D card effect, drag-and-drop functionality, and a responsive grid background pattern.