Theme Color Palette

Skip to main content
What can I help you find?
< Back

Theme Color Palette

Posted
Updated
Bygccdev

The first thing I recommend doing is setting your theme color palette. This will make your selected colors available to most blocks in the editor.

Note: Some plugins do not pull in the color palette and will require colors to be set in a different manner.

About The Color Palette

The color palette is a group of preselected colors that are used throughout the theme styles.

Main Theme Colors

  1. Primary Color
  2. Secondary Color
  3. Tertiary Color
  4. Quaternary
  5. Light Grey
  6. Dark Grey
  7. White
  8. Black

Additional Colors for Styles

  • Button Hover Text
  • Button Hover Background
  • Button Hover Border
  • Button Outline Hover Text
  • Button Outline Hover Background
  • Button Outline Hover Border
  • Slider Controls
  • Accordion Text
  • Accordion Background
  • Accordion Hover Text
  • Accordion Hover Background
  • Tab Background
  • Tab Text
  • Tab Active Background
  • Tab Active Text
  • Social Hover Icon
  • Social Hover Background
  • Video Popup Hover Button
  • Video Popup Hover Text
  • Video Popup Hover Icon

How To Set Your Color Palette

To set your color palette, visit Appearance > Editor > Styles to access the style editor.

On the right side of the page, you’ll see the Styles panel. If the style editor panel is not open, click the half shaded circle icon in the top right corner to toggle the panel opened/closed.

Click on Colors. Then click on the palette to expand the color palette.

Click the 3 dots to the right of Theme colors and select Show details. This will allow you to see the names of the colors.

There are basic theme colors (primary, secondary, etc.) along with additional colors utilized in CSS for things like button hover colors and accordion/tab colors. Focus on the main theme colors for now. You will likely come back here as you build to adjust the additional colors. These colors can be ignored if the elements are not used on the site.

After you’ve selected colors, be sure to click the blue Save button in the upper right corner. You’ll need to click save twice.

Pro Tip: After you save, refresh to get the colors to update in other settings.

Table of Contents