# Form Color Picker

Color picker with a swatch button that opens a popover with a saturation area and hue slider.

- id: `form-color-picker`
- Page: https://agentic-ui-kit.com/components/form-color-picker
- Live preview: https://agentic-ui-kit.com/live/component/form-color-picker?piece=form-color-picker

## Install

```bash
agentic-ui add form-color-picker
npx shadcn@4.17.0 add @agentic-ui/form-color-picker
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** swatch-trigger, popover, saturation-brightness-area, hue-slider, hex-rgb-hsl-oklch-fields, eyedropper-api, theme-token-presets, keyboard-slider, form-field, dark-mode
- **Intents:** create-edit, configure
- **Suits domains:** saas, settings, ecommerce, devtools, media
- **Interaction:** pointer-drag, keyboard-navigation, text-entry, popover
- **Screen role:** management
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** color picker with a swatch button that opens a popover with a saturation area and hue slider, brand color setting with hex, RGB, HSL and OKLCH inputs, pick a color from the screen with the EyeDropper API and choose from theme color presets, theme customizer where the user chooses an accent color
- **Avoid when:** only a few fixed colors are allowed, such as labels (use radios styled as swatches), an entire theme, not one color, is edited, alpha or gradient editing is required (this picker edits opaque sRGB colors)
- **Preserve when adapting:** slider-semantics, token-presets, validation
- **Replace when adapting:** preset-tokens, default-value, label
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** popover
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives