Custom Global Colors

Astra’s Global Color Palette gives every site 9 theme colors — Brand, Alternate Brand, Headings, Text, four background colors, and one supporting color. Starting with Astra 4.14.0, you can extend the palette with up to 9 custom colors of your own — accent shades, state colors like success or error, category colors, or extra brand tints.

Custom colors behave exactly like the built-in palette colors: they switch along with your palette style, survive preset changes, and show up in every color picker — the Customizer, the WordPress block editor, Elementor’s global colors, and Astra’s meta box settings.

Adding a Custom Color

1. From your WordPress dashboard, go to Appearance → Customize → Global → Colors.
2. In the Global Palette section, click the dashed + button at the end of the color swatches.
3. A new swatch is added instantly, named Custom 1 and filled with white (#FFFFFF) as a neutral starting point.
4. Click the new swatch to open the color picker:
   1. Type a name for the color in the field at the top (for example, Accent or Success). The name appears everywhere the color is listed — swatch tooltips, the block editor palette, and Elementor.
   2. Pick the color using the picker or by entering a hex/RGBA value.
5. Click Publish to save.

Tip: The name field has no visible border until you focus it with the keyboard — just click into it and type.

One Color, Different Value per Palette Style

Like the 9 theme colors, a custom color is a role that can hold a different value in each palette style. When you add a custom color, the same slot is created in all of your palette styles.
For example, a “Success” color can be a deep green (#16A34A) in your light styles and a brighter green (#22C55E) in your Dark style — switching styles swaps the value automatically, and everything using the color follows along.
To set a per-style value: select the palette style card first, then click the custom swatch and adjust the color. Repeat for each style you want to tune.

Where Custom Colors Appear

Once published, your custom colors are available — with their names — in:

• Every Astra color option in the Customizer (theme colors, headers, footers, buttons, and so on)
• The WordPress block editor color palette (text, background, and button colors)
• Elementor’s Global Colors panel and widgets (when the global color sync is enabled)
• Astra’s page/post meta box color settings
• The Customizer style guide view

Under the hood, each custom color is a CSS variable — the first custom color is var(--ast-global-color-9), the second var(--ast-global-color-10), and so on. You can use these variables directly in Additional CSS or custom stylesheets.

Renaming or Changing a Custom Color

Click the custom swatch to open its picker — edit the name field or pick a new color at any time. Changes apply live in the preview and everywhere the color is used once you publish.
The Reset button inside a custom color’s picker resets that palette style’s value back to white.

Removing a Custom Color

1. Hover over the custom swatch — a small × badge appears at its top-right corner.
2. Click the badge. A confirmation appears: “Remove [name] from the palette?”
3. Click Remove to confirm (or Cancel to keep it).

What happens to elements already using the color?

Removing a custom color removes it everywhere — the removal confirmation warns you about this before anything happens:

• The color disappears from all color pickers, the block editor palette, and Elementor’s Global Colors panel.
• Elements still using the color lose it: text falls back to the surrounding text color and backgrounds become transparent, in both the editor and on your site. Nothing breaks structurally, but the styling is gone until the color is added back.

If you only want to change a color everywhere it’s used, edit it instead of removing it — every element using it follows automatically.

Bringing a removed color back

Removal is fully reversible. Click the + button after removing a color and the removed color returns — with the same name and the same values in every palette style — and every element that was using it gets its styling back instantly. If a removal was a mistake, adding the color back is the undo.
New slots are only created once all previously removed colors have been brought back.

Custom Color Limit

You can add up to 9 custom colors (18 palette colors in total). When you reach the limit, the + button is hidden and a notice appears below the swatches:

Note: You are using the maximum number of custom colors allowed. Learn More

Frequently Asked Questions

Do custom colors work with palette presets (Oak, Lily, Cedar, …)? Yes. Applying a preset only changes the 9 theme colors — your custom colors are left untouched.
Do custom colors survive a theme update? Yes. They are stored in your site’s settings, not in theme files.
Are custom colors included when I import a Starter Template? No — importing a full Starter Template replaces the color palette entirely, including custom colors.
Can editors translate custom color names? Custom color names are your own content (like a post title), so they are shown exactly as you typed them and are not translated.

For Developers

Raising or lowering the custom color limit

The default limit of 9 custom colors can be changed with the astra_global_palette_custom_colors_limit filter:

/**
 * Allow up to 12 custom global colors in the Astra palette.
 */
add_filter( 'astra_global_palette_custom_colors_limit', function () {
    return 12;
} );

Notes:

• The limit is enforced both in the Customizer UI (the + button hides at the cap) and server-side on save.
• Each custom color adds a small amount of inline CSS on every page (the :root variable plus the block editor .has-*-color / .has-*-background-color class rules), which is why the default cap is conservative.
• Lowering the limit below the number of colors a site already has does not delete existing colors — it only prevents adding new ones.

Useful reference

What	Value
CSS variable for custom slot n	--ast-global-color-{9 + n} (zero-based)
Block editor slug	ast-global-color-{9 + n}
Elementor global id	astglobalcolor{9 + n}
Storage	astra-color-palettes option → customColors array + slots 9+ of each palettes.palette_N array
Limit filter	astra_global_palette_custom_colors_limit (default 9)

Example of the CSS Astra emits on the front end for a palette with four custom colors (taken from a live site):

:root {
    --ast-global-color-0: #DCA54A;  /* Brand */
    /* … theme slots 1-8 … */
    --ast-global-color-9: #16A34A;  /* Success */
    --ast-global-color-10: #F59E0B; /* Warning */
    --ast-global-color-11: #DC2626; /* Error */
    --ast-global-color-12: #0891B2; /* Info */
}

Each active custom slot also gets the block editor color classes on the front end — .has-ast-global-color-9-color and .has-ast-global-color-9-background-color — so editor-assigned colors keep working like any theme color. Removed colors stop emitting their variable and classes entirely until they are added back.