Last update: June 18, 2025

Color Control Descriptor

This control uses the ngx-color color picker. The npm package is also available.

Property	Type	Description
colorMode	color presets	Use the Sketch picker for color mode, and the Twitter picker for presets.
disableAlpha	boolean	Removes the alpha (transparency) slider and options.
clearValue	string	Text shown for the clear/reset button.
inline	boolean	Displays the color picker inline instead of as a popup.
presets	string[]	List of predefined color values used in presets mode.

Examples

Color picker in HSLA format

...
    "settings": [
        {
            "id": "headerColor",
            "label": "Header color",
            "type": "color",
            "outputFormat": "hsla"
        },
        ...
    ]
...

Color picker displayed inline

        "settings": [
            {
                "id": "headerColor",
                "label": "Header color",
                "type": "color",
                "inline": "true"
            },
            ...
        ]
    ```

...

---

← Collection Files →