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:

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.

INFO

This option covers colors offered for template content. Recoloring the editor interface itself is a separate feature, described in Themes.