---
title: "Color Palette"
description: "Customize displayed colors in the color picker inside the editor. Prepare a brand for the template and display pre-selected colors."
url: https://docs.topol.io/email-editor/guide/custom-color-palette.html
---

# Custom Color Palette

**The `colors` option fills the color picker with your own palette**, so the brand colors are one click away wherever a color is chosen in the editor.

## Set custom colors

Add a `colors` array to your `TOPOL_OPTIONS` configuration when initializing the editor:

```ts
colors: ["#000000", "#ffffff", "#ffc000"],
```

> **WARNING**
>
> The palette **replaces** the editor's built-in swatches rather than adding to them. Passing three colors leaves users with those three, including in place of the built-in transparent swatch. List every color your users need. An empty array or an omitted option keeps the defaults.

Values are passed through as CSS, so `rgb()`, `rgba()`, and named colors all render. **Hex is still the safest choice**: the rich text editor's color menu needs hex, and the automatic "Used in template" group is detected by scanning for hex values, so a color defined another way never shows up there.

The picker groups swatches under two headings. **Predefined** holds the colors from this option, and **Used in template** is collected automatically from the open template.

![Color Picker with custom colors inside](https://docs.topol.io/color-picker.png)

> **INFO**
>
> This option covers colors offered for template content. Recoloring the editor interface itself is a separate feature, described in [Themes](https://docs.topol.io/email-editor/guide/themes.html).