Color picker

The color picker allows you to easily select a color value instead of manually using a hex code.

The basic syntax for the color picker is very simple:

{
    "name": "primaryColor",
    "label": "Primary color",
    "group": "Colors",
    "value": "#E7AE12",
    "type": "colorpicker",
    "outputFormat": "HEX"
}

The available options:

• RGBA or HEX (default)
• RGBA
• HSLA

When RGBA or HSLA is selected, the formatting in the control cannot be changed - there will always be inputs for RGBA or HSLA.

The above code will generate a color picker UI with the label "Primary color" and default color set to #E7AE12

To turn the selected color into CSS, use theme variables or visual overrides.