On this page
Every color on your site is set in the Colors panel of the Design editor. Six general colors theme all your sections, headings and buttons; a few more control the menus. You can pick each color yourself or start from a preset and adjust from there.
Open the panel
- Open your site in the dashboard and choose Design in the sidebar.
- Click Colors.
Changes apply to the preview instantly and save automatically.
Apply a color preset
A preset is a coordinated set of colors applied in one click. It replaces all your current colors and restyles the whole site, so it is the quickest way to try a completely different mood.
- Click Color presets at the top of the panel.
- Use All, Light or Dark to filter the list.
- Click a row to apply it. The list stays open, so you can keep trying others, or press the up and down arrow keys to step through them and watch the preview change.
- Click outside the list or press Escape to close it.
Each row shows the six general colors as swatches. Hover a row to see the preset's name.
Note: A preset takes over every color on the site. When you close the preset list, custom colors you set on the header, footer, page and section headings, the mobile menu, the back to top button and the preloader are reset so they follow the new palette, and any section using Custom Colors has that switch turned off. The section's color values are kept, so you can switch Custom Colors back on to restore them; the other overrides come back with each panel's undo button.
Tip: Apply a preset first, then fine-tune one or two colors below. A preset has already balanced text contrast for you, so small edits are safer than starting from scratch.
The general colors
| Color | Used for |
|---|---|
| Background | The page body background |
| Body text | Default text |
| Headings | All heading levels |
| Accent | Buttons, links and highlights |
| Surface | Cards, alternate panels and sections that sit on a different tone |
| On accent | Text placed on top of the accent color, such as button labels |
Click the swatch next to a color to open the picker. Drag in the picker or type a hex value such as #1f4d3a. Every color always has a value; there is no "unset" state.
Menu colors
Menus get their own colors so they stay readable against the header. Which groups you see depends on your header template (see header, footer and menu styles):
- With a top header: a Desktop menu group and a Mobile menu group.
- With a side header: a single Navigation menu group.
Each group has Nav link, Nav hover, Dropdown bg, Dropdown link and Dropdown hover. The mobile group adds Drawer bg for the mobile menu background.
Mobile menu colors start out mirroring your desktop menu colors. Set one only when you want the mobile menu to differ.
Undo a color change
The panel's title row has undo and redo buttons. One step is one picker session or one preset list session: open, change as much as you like, close. Undo takes the whole session back. Presets and individual edits share the same history, in the order you made them.
Colors that live elsewhere
- The header and footer can override their own Background and Text colors in the Header and Footer panels. Leave those unset and they follow the palette.
- Page and section headings can have their own colors in the Page Heading and Section Heading panels.
- A single section can use its own colors without affecting the rest of the site. See section settings.
Applying a color preset resets all of these, so the preset styles the whole site rather than stopping at the edges of your earlier overrides.