Palette

Updated

Usage

Open Appearance → Customize → Styles → Palette to set your brand colors. Each color becomes a choice across the site: block color pickers, buttons, header and footer backgrounds, and text colors all use this palette.

Start with Primary, Secondary, and Accent for your main brand colors. Then adjust Text and Muted so body text and captions are easy to read on Canvas and your page background.

When to use it

  • Launching a new site, or updating brand colors after Theme Setup.
  • Fixing contrast. If links or buttons look faint, check Primary against Text and Canvas.
  • Before adjusting Styles → Buttons, Links, or the Header & Menus colors, which all pick from the palette.

Tips

  • Canvas is for cards and panels. The color behind whole pages is Body Background under Settings → General.
  • Success and Failure color form messages. Keep them distinct from your brand colors so errors and confirmations stand out.
  • Palette changes update many blocks at once. Publish at a quiet moment.

Settings

Palette

White setting in the block editor sidebar
White
Black setting in the block editor sidebar
Black
Gray setting in the block editor sidebar
Gray
Primary setting in the block editor sidebar
Primary
Secondary setting in the block editor sidebar
Secondary
Accent setting in the block editor sidebar
Accent
Variant setting in the block editor sidebar
Variant

Extra brand accent beyond Primary, Secondary, and Accent. Available anywhere the extended palette is offered.

Text setting in the block editor sidebar
Text

Default color for body copy and most headings. Blocks and typography settings that pick Text use this value.

Muted setting in the block editor sidebar
Muted

Softer text for captions, meta lines, and secondary labels. Pair with Text for readable hierarchy.

Canvas setting in the block editor sidebar
Canvas

Background fill for cards, panels, and Canvas color choices in blocks — separate from the page Body Background in Site Settings.

Success setting in the block editor sidebar
Success

Positive feedback color for form confirmations and success states.

Failure setting in the block editor sidebar
Failure

Error and validation color for form messages and alerts.