# ColorPicker

```ts
import { ColorPicker } from 'cx/widgets';
```

The `ColorPicker` widget provides an interactive interface for selecting colors. It displays a saturation/lightness picker, hue slider, alpha slider, and input fields for HSL, RGB, and hex values. On supported browsers, it also includes an eye-dropper tool for picking colors from anywhere on the screen.

```tsx
import { createModel } from "cx/data";
import { ColorPicker } from "cx/widgets";

interface Model {
  color: string;
}

const m = createModel<Model>();

export default (
  <div class="flex flex-wrap gap-4 items-start">
    <ColorPicker value={m.color} />
    <div
      class="w-24 h-24 rounded border border-gray-300"
      style={{ background: m.color }}
    />
  </div>
);

```

## Configuration

### Properties

| Property   | Type            | Default        | Description                                                    |
| ---------- | --------------- | -------------- | -------------------------------------------------------------- |
| `value`    | `string`        | `null`         | Color value in rgba, hsla, or hex format                       |
| `format`   | `string`        | `"rgba"`       | Output format: `"rgba"`, `"hsla"`, or `"hex"`                  |
| `reportOn` | `string`        | `"blur change"`| Events that trigger value updates (space-separated)            |
| `style`    | `string/object` |                | CSS styles applied to the picker                               |
| `class`    | `string`        |                | CSS class applied to the picker                                |

### Callbacks

| Property       | Type       | Description                                                    |
| -------------- | ---------- | -------------------------------------------------------------- |
| `onColorClick` | `function` | `(e, instance) => void` - Called when color preview is clicked |

## Features

The ColorPicker includes:
- **Saturation/Lightness picker** - Click and drag to select saturation and lightness
- **Hue slider** - Horizontal slider for selecting hue (0-360)
- **Alpha slider** - Horizontal slider for selecting opacity (0-1)
- **HSL inputs** - Direct input for Hue, Saturation, Lightness values
- **RGB inputs** - Direct input for Red, Green, Blue values
- **Color preview** - Shows the currently selected color
- **Value display** - Read-only fields showing HSLA, RGBA, and Hex values
- **Eye-dropper** - Pick colors from anywhere on screen (Chrome/Edge only)

All inputs support mouse wheel for quick adjustments.