Skip to main content

Color Picker

Picker group: Widgets · Project type: rgbPicker · Reference version: 27.0.29

Use Color Picker to select a lighting color. The displayed name changed from RGB Picker in 27.0.13; the stored type remains rgbPicker, and this guide retains its existing URL. Choose the RGB or Hex variant to match the receiving system. The picker has no alpha channel.

Configure incoming color​

  1. Insert Color Picker, select it, and open Element Properties.
  2. Choose the variant before configuring its values and actions.
  3. For RGB (variant: "rgb", the default), bind Red, Green, and Blue (value_r, value_g, value_b) independently, each 0–255.
  4. For Hex (variant: "hex"), bind the single value_hex string, for example #ff8800. Three-digit #RGB shorthand is also accepted.
  5. Use literals, variables, page parameters, datasources, or feedback tokens as appropriate. Save and test incoming updates in Live Preview.

For RGB Crestron feedback, bind the channels to analog joins such as !crestron:type=number;name=201!, then 202 and 203. For Hex, bind a string value from the intended source instead of three analog joins.

Missing, invalid/out-of-range, or unresolved RGB channel values fall back to 255; invalid/empty/unresolved hex values fall back to #ffffff. A pick updates the displayed color immediately, then synchronizes with the bound stable value after interaction settles. Provide incoming feedback when the device should acknowledge the selected color.

Send color changes​

Choose Before Change, On Change, or After Change to match the integration's timing.

VariantEvent valueAvailable integration
RGBSerial rgb(r, g, b) plus numeric channel contextPer-channel analog Join Map, or a formatted command/message.
HexSerial lowercase #rrggbbSerial command or a formatted message; no channel Join Map.

For RGB Crestron output, create one Join Map action and assign Red, Green, and Blue to analog joins. Saved data uses channelJoins: { "r": "201", "g": "202", "b": "203" }. Each change writes values 0–255. This differs from Dpad's momentary digital map.

For Web, WebSocket, or MQTT, insert the appropriate context tokens in the JSON message editor:

{"red": @context:red@, "green": @context:green@, "blue": @context:blue@}

For the Hex variant:

{"color": "@context:hex@"}

@context:hex@ is a string and stays inside JSON quotes. Both variants also expose @context:elementName@. Context markers resolve in JSON action bodies; for an ordinary serial command use the event's change value. See JSON action bodies.

Update an existing project​

Keep the rgbPicker type and existing identity. For independent channels, select RGB and use value_r/g/b; for a single hex-feedback string, select Hex and use value_hex. Legacy value_hex_direct and value_hex_signal_s do not replace the current variant/value setup. Revisit outgoing actions after changing variants, because Hex does not offer the RGB channel map.

Older screenshots or recordings may use the RGB Picker label. Verify the selected variant and saved bindings rather than inferring the format from that older label.

Verify the result​

Test red, green, blue, white, a mixed color, invalid input, and external feedback after a local pick. Check each RGB analog join or JSON field independently; for Hex, confirm the receiver expects a serial hex string. Run Health Check and test the actual integration and target runtime.

Continue with Actions, Variables, and the component catalog.