> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Color

Allows you to display color controls for your widget.

---

**Widget Configuration Output**

```json showLineNumbers={false}
{
  "backgroundColor": "#444444"
}
```

> **Note**
>
> * The resulting color picker supports RGBA.
> * You can select transparent as a color. The returned value is the string “transparent”.

---

**User Interface Output**

![output](/_fern-img/748bf95ed144272639f130c649c69a806de513966289dea14e2825a5c1bbbf9a.webp)

---

**JSON Schema**

| Property  | Type   | Description                                                                         | Example            |
| --------- | ------ | ----------------------------------------------------------------------------------- | ------------------ |
| `type`    | string | The type of setting component to display.                                           | "color"            |
| `label`   | string | The user friendly message to inform the user how this setting will be used.         | "Background color" |
| `id`      | string | The variable name where the setting value will be available in the widget template. | "backgroundColor"  |
| `default` | string | The default value to use when rendering the widget for the first time.              | "#444444"          |