---
url: /en/docs/fields/color.md
description: Select and input colors in Sveltia CMS with an interactive color picker.
---

# Color Field

The Color field type allows users to select and input colors using a color picker interface.

## User Interface

### Editor

The browser’s native color picker.

If the `enableAlpha` option is set to `true`, a slider for selecting the alpha (transparency) channel will also be displayed.

If the `allowInput` option is set to `true`, users can manually enter color values as text.

::: info Future Plans

We plan to enhance the UI with a custom color picker in the future.

:::

### Preview

A small color swatch showing the selected color, along with its RGB(A) hex value and `rgb()` function notation.

## Data Type

A string representing the color in RGB format, e.g. `#RRGGBB`. The value is stored in uppercase letters.

If the `enableAlpha` option is set to `true`, the color will be stored in RGBA format, e.g. `#RRGGBBAA`.

If the `required` option is set to `false` and the field is left empty, the value will be an empty string.

## Data Validation

* If the `required` option is set to `true`, the color value must not be an empty string.
* The color value must be a valid hex color code, either in RGB (`#RRGGBB`) or RGBA (`#RRGGBBAA`) format, depending on the `enableAlpha` option.
* If the `pattern` option is provided, the color value must match the specified regular expression pattern.

## Options

In addition to the [common field options](/en/docs/fields#common-options), the Color field supports the following options:

### Required Options

#### `widget`

* **Type**: `string`
* **Default**: `string`

Must be set to `color`.

### Optional Options

::: tip

Unlike most of other config options, `enableAlpha` and `allowInput` are camelCased.

:::

#### `default`

* **Type**: `string`
* **Default**: `""` (empty string)

The default color value for the field, e.g. `#FF0000` for red. If `enableAlpha` is `true`, the default value should include the alpha channel, e.g. `#FF0000FF` for opaque red.

#### `enableAlpha`

* **Type**: `boolean`
* **Default**: `false`

If set to `true`, the color picker will allow selection of the alpha (transparency) channel, and the color value will be stored in RGBA format.

#### `allowInput`

* **Type**: `boolean`
* **Default**: `false`

If set to `true`, users can manually enter color values as text in addition to using the color picker.

## Examples

### Basic Color Field

This example shows a simple Color field configuration.

::: code-group

```yaml [YAML]
- name: background_color
  label: Background Color
  widget: color
```

```toml [TOML]
[[fields]]
name = "background_color"
label = "Background Color"
widget = "color"
```

```json [JSON]
{
  "name": "background_color",
  "label": "Background Color",
  "widget": "color"
}
```

```js [JavaScript]
{
  name: "background_color",
  label: "Background Color",
  widget: "color",
}
```

:::

Output example:

::: code-group

```yaml [YAML]
background_color: '#FFFFFF'
```

```toml [TOML]
background_color = "#FFFFFF"
```

```json [JSON]
{
  "background_color": "#FFFFFF"
}
```

:::

### Color Field with Alpha and Input Allowed

This example shows a Color field configuration with alpha channel enabled, manual input allowed, and a default value set.

::: code-group

```yaml [YAML]
- name: overlay_color
  label: Overlay Color
  widget: color
  enableAlpha: true
  allowInput: true
  default: '#00000080'
```

```toml [TOML]
[[fields]]
name = "overlay_color"
label = "Overlay Color"
widget = "color"
enableAlpha = true
allowInput = true
default = "#00000080"
```

```json [JSON]
{
  "name": "overlay_color",
  "label": "Overlay Color",
  "widget": "color",
  "enableAlpha": true,
  "allowInput": true,
  "default": "#00000080"
}
```

```js [JavaScript]
{
  name: "overlay_color",
  label: "Overlay Color",
  widget: "color",
  enableAlpha: true,
  allowInput: true,
  default: "#00000080",
}
```

:::

Output example:

::: code-group

```yaml [YAML]
overlay_color: '#00000080'
```

```toml [TOML]
overlay_color = "#00000080"
```

```json [JSON]
{
  "overlay_color": "#00000080"
}
```

:::