Skip to main content
Category: Controls · Sends commands: yes · Emits a value: yes (auto-injected)

​
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

EventFires when
changeThe color changes (auto-injects the color)
selectA 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: 
{ "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: 
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: 
widget.on('lightPicker', 'change', (color) => {
  const hex = typeof color === 'string' ? color : color.hex;
  widget.setText('hexLabel', hex);
});

Emitted values

The auto-injection rule.

Slider

For a single numeric value (e.g. brightness).