# Color picker (UI SDK): Presets and channels

> `ColorPickerSwatches` is one tab stop with arrow keys between presets, and a preset stays selected however the value is written. `ColorPickerChannelInput` edits one channel as a number. The eyedropper hides itself in browsers that can’t pick from the screen.

Canonical: https://hextaui.com/docs/ui-sdk-color-picker/examples/channels

Component docs: https://hextaui.com/docs/ui-sdk-color-picker

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/ui-sdk-color-picker-channels.json
```

This adds `components/examples/ui-sdk-color-picker/channels.tsx` with the Color picker component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/ui-sdk-color-picker/channels.tsx"
import {
  ColorPicker,
  ColorPickerChannelInput,
  ColorPickerEyeDropper,
  ColorPickerSwatch,
  ColorPickerSwatches,
  ColorPickerSwatchItem,
} from "@/components/ui/ui-sdk-color-picker"

const presets = [
  "#ef4444",
  "#f97316",
  "#eab308",
  "#22c55e",
  "#0ea5e9",
  "#6366f1",
  "#a855f7",
  "#ec4899",
]

const channels = [
  { channel: "red", label: "R" },
  { channel: "green", label: "G" },
  { channel: "blue", label: "B" },
] as const

function UiSdkColorPickerChannels() {
  return (
    <ColorPicker
      aria-label="Label color"
      space="srgb"
      format="hex"
      defaultValue="#0ea5e9"
    >
      <ColorPickerSwatches aria-label="Presets">
        {presets.map((preset) => (
          <ColorPickerSwatchItem key={preset} value={preset} />
        ))}
      </ColorPickerSwatches>
      <div className="flex items-end gap-2">
        <ColorPickerSwatch />
        {channels.map(({ channel, label }) => (
          <label
            key={channel}
            className="flex min-w-0 flex-1 flex-col gap-1 text-xs text-muted-foreground"
          >
            {label}
            <ColorPickerChannelInput channel={channel} />
          </label>
        ))}
        <ColorPickerEyeDropper aria-label="Pick a color from the screen" />
      </div>
    </ColorPicker>
  )
}

export { UiSdkColorPickerChannels }
```

## Props in this example

### ColorPicker

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` | `string` | `"black"` |  |
| `space` | `"hsv" \| "hsl" \| "srgb" \| "oklch"` | `"hsv"` | Which channels the parts edit. |
| `format` | `ColorFormat` | – | How the value is written. Hex for hsv, the space’s own CSS syntax otherwise. |

### ColorPickerChannelInput

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `channel` | `ColorChannel` | – | The channel to edit, in the units people read it in. |

### ColorPickerSwatchItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | – | Required. The preset’s color. |

## More Color picker examples

- [Inline](https://hextaui.com/docs/ui-sdk-color-picker/examples/inline)
- [Alpha](https://hextaui.com/docs/ui-sdk-color-picker/examples/alpha)
- [OKLCH](https://hextaui.com/docs/ui-sdk-color-picker/examples/oklch)
- [Vertical sliders](https://hextaui.com/docs/ui-sdk-color-picker/examples/vertical)
- [Controlled](https://hextaui.com/docs/ui-sdk-color-picker/examples/controlled)
- [Form](https://hextaui.com/docs/ui-sdk-color-picker/examples/form)
- [Disabled](https://hextaui.com/docs/ui-sdk-color-picker/examples/disabled)
- [Read-only](https://hextaui.com/docs/ui-sdk-color-picker/examples/read-only)
- [Right to left](https://hextaui.com/docs/ui-sdk-color-picker/examples/rtl)