Color

Displays a color picker that stores a raw hex value.

For most color settings you should use the Theme Color control instead — it keeps colors managed by Theme Studio so sites adapt to theme changes and dark mode automatically. Reserve the raw color control for cases where a fixed hex value is genuinely required, such as configuring a third-party library that only accepts hex colors.

Control Example

{
  "title": "Toolbar Background",
  "id": "toolbarBackground",
  "color": {
    "default": "#F9F9FA"
  }
}

Group Example

{
  "groups": [{
    "title": "Viewer Appearance",
    "properties": [{
      "title": "Toolbar Background",
      "id": "toolbarBackground",
      "color": {
        "default": "#F9F9FA"
      }
    }]
  }]
}

Supported Options

The color control supports the following options.

Key	Type	Notes
default	string	The default color as a hex string, e.g. #D4D4D7.

Value

In templates, {{id}} returns the selected hex string. Unlike the Theme Color control there is no built-in light/dark pairing — if a component needs a separate dark-mode color, define a second property for it:

{
  "title": "Background",
  "id": "backgroundColor",
  "color": { "default": "#D4D4D7" }
},
{
  "title": "Background (Dark)",
  "id": "backgroundColorDark",
  "color": { "default": "#2A2A2E" }
}