Tutorials

Setting Up Astra's Global Color Palette with PaletteRx

Astra is one of the most popular WordPress themes, and its Global Color Palette is central to how the entire theme renders. Nine color slots control everything from heading colors to button backgrounds to link hover states. Getting these nine slots right determines whether your site looks cohesive or haphazard.

Understanding Astra's 9 Slots

Astra's palette lives in Appearance, Customize, Global, Colors. The nine slots are referenced throughout the theme as CSS variables: --ast-global-color-0 through --ast-global-color-8. Astra's default layout assigns specific purposes to each slot: the first few are accent and link colors, the middle slots handle text and heading colors, and the final slots manage background tones.

Most Astra users fill these slots by eye, which leads to contrast failures and color collisions. PaletteRx builds an accessible palette first, then maps it to the slot structure Astra expects.

Exporting from PaletteRx

Select Astra from the WP Themes section in PaletteRx's export step. PaletteRx maps your Primary, Secondary, Light Base, and Dark Base colors to Astra's 9 slots following the theme's default assignment logic. The export includes the exact hex values and which slot each belongs in.

Setting Up in Customizer

Open your WordPress Customizer, navigate to Global, then Colors. You will see the 9-slot palette grid. Replace each slot with the corresponding hex value from PaletteRx's Astra export. Save and publish.

The changes take effect immediately across your entire site. Every element that references Astra's global color variables will update to your new palette.

Why 9 Slots Is Enough

Nine colors seems constraining, but it aligns with best practice. A focused palette prevents color sprawl and decision fatigue. PaletteRx's role system maps naturally: one or two primary accent colors, one or two secondary supporting colors, a couple of text and heading shades, and background tones. Nine slots cover the essential design system needs.

💡 Tip: After setting up Astra's palette, check the Body and Headings typography settings. Astra pulls text colors from the global palette, so your dark base color will automatically become the default text color if it's in the right slot.

Ready to Build Your Palette?

PaletteRx guides you from color selection to accessible, export-ready design systems in minutes.

🎨 Launch PaletteRx