# Color picker

> Saturation and hue pickers, hex field, swatches, eyedropper and copy.

Component · Pro · https://lodeui.com/components/color-picker

## 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

```bash
npx shadcn@latest add @lode/color-picker
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="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 |
| --- | --- |
| ← / → | Saturation (area) or hue (slider) |
| ↑ / ↓ | 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.

## Related

- [Slider](https://lodeui.com/components/slider) — Drag, click or use the keys. The value rides above the thumb while you drag.
- [Input](https://lodeui.com/components/input) — Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.
- [Range slider](https://lodeui.com/components/range-slider) — Two-thumb range with value bubbles and an optional live histogram.