> ## Documentation Index
> Fetch the complete documentation index at: https://buttercms.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Color field

> Detailed explanation of the Color field in ButterCMS, including input, output, configuration options, picker, and use cases.

The **Color** field allows content creators to select a color via a number of easy options:

* a hue slider/clickable color field
* eyedropper tool to pick colors directly off of a page or image
* direct input of selected color values via RBG, HSL, or HEX codes

<Info>
  Use the Color field when editors need to select any color. Use a Dropdown or reference to a Collection when limiting to specific brand-approved colors.
</Info>

## Field at a glance

### Input and output

<CardGroup cols={2}>
  <Card title="Input type" icon="arrow-right-to-bracket">
    hue slider, color field, eyedropper, or direct value input
  </Card>

  <Card title="API output" icon="arrow-right-from-bracket">
    `string` (Hex value with #)
  </Card>
</CardGroup>

### API response example

```json theme={null}
"accent_color": "#FF5733"
```

### Field configuration options

| `Option Name` | `Type`  | `Function`                                   |
| ------------- | ------- | -------------------------------------------- |
| Required?     | boolean | Make field required to save page             |
| Help text     | string  | Add help text to describe usage to your team |
| Default value | string  | Set a default value for the field            |

## Common use cases

* customizing buttons, templates, and banners
* setting accent colors

### Color field API response

```json theme={null}
{
  "brand_color": "#348062",
  "accent_color": "#FF5733",
  "background_color": "#FFFFFF"
}
```