# Color element

Displays a colour code with a swatch of the colour.

| | |
|---|---|
| **Available in** | Messages, Modals, Home tab |
| **Used in** | [Rich text section element](https://workstation.repzo.com/docs/developers/block-kit/rich-text/rich-text-section-element), [Rich text list element](https://workstation.repzo.com/docs/developers/block-kit/rich-text/rich-text-list-element), [Rich text quote element](https://workstation.repzo.com/docs/developers/block-kit/rich-text/rich-text-quote-element) |

## Fields

| Field | Type | Description | Required? |
|---|---|---|---|
| `type` | String | The type of object; in this case, `color`. | Required |
| `value` | String | The hex value of the colour, e.g. `#0E9F6E`. | Required |
| `style` | Object | An object of optional boolean properties that dictate style: `bold`, `italic`, `strike`, `highlight`, `client_highlight`, `underline` and `unlink`. | Optional |

> **How Repzo Chat differs from Slack**
>
> - Shown as the colour code; the web app draws a small swatch after it. `style` is ignored.

## Examples

### Brand colours

```json
{
  "blocks": [
    {
      "type": "rich_text",
      "elements": [
        {
          "type": "rich_text_section",
          "elements": [
            {
              "type": "text",
              "text": "Primary: "
            },
            {
              "type": "color",
              "value": "#0E9F6E"
            },
            {
              "type": "text",
              "text": "  Accent: "
            },
            {
              "type": "color",
              "value": "#0D9488"
            }
          ]
        }
      ]
    }
  ]
}
```

## Related

- [Rich text elements](https://workstation.repzo.com/docs/developers/block-kit/rich-text)
- [Block Kit overview](https://workstation.repzo.com/docs/developers/block-kit)