Color pickerPro
Saturation and hue pickers, hex field, swatches, eyedropper and copy.
Brand color
#E9A23B
When to use
- Brand colors, theme editors, labels and design tools.
When not to use
- A handful of fixed choices: use swatches in a radio group.
Installation
Usage
Import it from @/components/ui/color-picker after installing.
example.tsx
import * as React from "react";
import { ColorPicker } from "@/components/ui/color-picker";
export function BrandColor() {
const [color, setColor] = React.useState("#c6f432");
return <ColorPicker value={color} onValueChange={setColor} />;
}API reference
ColorPicker
Saturation / brightness area, hue slider, hex field, swatches, eyedropper (where supported) and copy.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue / onValueChange | string (hex) | – | Controlled or uncontrolled. |
| swatches | string[] | – | Preset colors; pass [] to hide. |
hexToHsv / hsvToHex
Conversion helpers used inside, exported for your own tools.
No props.
Keyboard interactions
| Keys | Action |
|---|---|
| ←or→ | Saturation (area) or hue (slider) |
| ↑or↓ | Brightness (area) or hue (slider) |
| Shift + arrows | Bigger steps |
Accessibility
- Both pickers are labelled sliders with readable values.
- The hex field is labelled and marks invalid input.
- Swatches are a radio group named by their hex.
Motion
- Thumbs follow with a light spring; the preview pops when the color changes; swatches scale on hover.
Responsive behavior
- Up to 272px wide; pointer drags work with touch and continue outside the area.
Performance
- Conversions are tiny pure functions; no canvas.
Notes for AI
- Values are lowercase 6-digit hex.
This page as Markdown, for assistants and coding agents:
/components/color-picker/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt