> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hyperwisor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Color Picker

> Pick a color and send it — output formats, auto-injected color params, and firmware read.

<Info>
  **Category:** Controls · **Sends commands:** yes · **Emits a value:** yes (auto-injected)
</Info>

## Mental model

A **Color Picker is a paint palette.** The user picks a color and it flows to the
device — as hex *and* broken-out channels — automatically. Ideal for RGB lighting.

## When to use it

* Set the color of an RGB light or LED strip
* Any "choose a color, apply it" control

## Settings

### General

* **Widget Title / ID**
* **Picker type / orientation / size**
* **Output format** — hex / rgb / hsl, etc.
* **Allow alpha / opacity**
* **Color presets** · **swatch size** · **grid columns**
* **Validate hex format** · **read-only** · **disabled**

### Style

Container, border, label styling, spacing.

### Triggers

| Event      | Fires when                                                |
| ---------- | --------------------------------------------------------- |
| `change`   | The color changes (auto-injects the color)                |
| `select`   | A color is selected                                       |
| *(common)* | `load`, `ready`, `destroy`, `update`, `visible`, `hidden` |

## Auto-injected color params

On `change` / `select`, the picker **injects the color into the action's params** —
both `hex` and per-channel components:

```json theme={null}
{ "color": "#ff8800", "hex": "#ff8800",
  "rgb": { "r": 255, "g": 136, "b": 0 }, "r": 255, "g": 136, "b": 0,
  "hsl": { … }, "hsv": { … }, "cmyk": { … } }
```

**Trigger** (params empty — the color arrives automatically):

```
WHEN     change
SEND TO  Current Device
EXECUTE  Light
Action   setColor   params: {}
```

**Firmware** (Arduino) — read the channels:

```cpp theme={null}
device.setUserCommandHandler([](JsonObject &msg) {
  JsonObject p = device.findParams(msg, "Light", "setColor");
  if (!p.isNull()) {
    int r = p["r"] | 0, g = p["g"] | 0, b = p["b"] | 0;
    setRGB(r, g, b);                         // or use p["hex"]
  }
});
```

## Script API example

The same interactions from a [dashboard script](/script/overview):

```js theme={null}
widget.on('lightPicker', 'change', (color) => {
  const hex = typeof color === 'string' ? color : color.hex;
  widget.setText('hexLabel', hex);
});
```

<CardGroup cols={2}>
  <Card title="Emitted values" icon="arrow-right-arrow-left" href="/dashboard/triggers#widgets-that-emit-a-value-auto-injected-params">
    The auto-injection rule.
  </Card>

  <Card title="Slider" icon="sliders" href="/dashboard/widgets/slider">
    For a single numeric value (e.g. brightness).
  </Card>
</CardGroup>