color-picker

Overview

The color-picker node adds color selection to your dashboard. Perfect for controlling RGB LEDs, smart lights, and any color-based settings. Outputs colors in various formats: HEX, RGB, HSL, or HSV.

Properties

Color Picker Preview

Output Formats

msg.payload = "#FF5733"

msg.payload = {
  r: 255,
  g: 87,
  b: 51
}

msg.payload = {
  h: 11,
  s: 100,
  l: 60
}

msg.payload = {
  r: 255, g: 87, b: 51,
  a: 0.8
}

Example: RGB LED Control

// Color Picker configuration:
{
  "label": "LED Color",
  "format": "rgb"
}

// Output when user picks color:
{
  "payload": { "r": 255, "g": 100, "b": 50 }
}

// Function node: Convert to GPIO PWM values
var color = msg.payload;

// PWM nodes expect 0-255 values
return [
    { payload: color.r },  // Red channel → PWM pin 17
    { payload: color.g },  // Green channel → PWM pin 18
    { payload: color.b }   // Blue channel → PWM pin 19
];

Example: Smart Bulb (HSL)

// Color Picker with HSL output
// Many smart bulbs use HSL format

// Configuration:
{
  "format": "hsl"
}

// Output:
{
  "payload": {
    "h": 240,    // Hue: 0-360 (color wheel position)
    "s": 100,    // Saturation: 0-100%
    "l": 50      // Lightness: 0-100%
  }
}

// Function node: Format for smart bulb API
msg.payload = {
    "on": true,
    "hue": Math.round(msg.payload.h * 182.04),  // Convert to 0-65535
    "sat": Math.round(msg.payload.s * 2.54),    // Convert to 0-254
    "bri": Math.round(msg.payload.l * 2.54)     // Convert to 0-254
};

return msg;

Preset Swatches

// Define preset colors in node configuration
{
  "showSwatches": true,
  "swatches": [
    "#FF0000",  // Red
    "#00FF00",  // Green
    "#0000FF",  // Blue
    "#FFFF00",  // Yellow
    "#FF00FF",  // Magenta
    "#00FFFF",  // Cyan
    "#FFFFFF",  // White
    "#FFA500"   // Orange
  ]
}