color picker

Color Picker

Color Picker

Figma-like color picker with saturation/value canvas, hue + alpha sliders, format switching, eyedropper, and swatches.

Preview

Features

  • 2D saturation/value color plane with draggable thumb.
  • Hue slider and alpha slider with live gradient tracks.
  • Format input modes: Hex, RGB, and HSL.
  • EyeDropper API support when available in the browser.
  • Returns a CSS-safe hex/hexa color string via onChange.

Installation

npx shadcn@latest add https://www.shadcn-form.com/registry/color-picker.json

Registry JSON: /registry/color-picker.json

Usage

import { ColorPicker } from '@/components/ui/color-picker'


const [color, setColor] = React.useState('#7c3aed')


<ColorPicker value={color} onChange={setColor} />

Current value: #7C3AED