The colors you choose represent a major part of your site’s design. This guide will show you how to manage your site’s color palettes.
In this guide
If your site uses a theme that supports the site editor, you can change your site’s colors using Styles. A quick way to find out if your site uses the site editor is to check under Appearance in your dashboard. If you see Editor here, you can change your site’s colors by following these steps:
- In your dashboard, go to Appearance → Editor.
- Click on Styles on the left, or select the Styles icon as shown here. The icon looks like a black-and-white circle.
- Select Colors.
- Select Palette to choose your site’s default colors or choose from the following elements on your site:
- Text
- Background
- Link
- Captions
- Button
- Heading
The remainder of this guide will explain each of these in more detail.
Your site’s color palette sets the default colors used across your site. While you can still control the color of any specific element, defining your color palette ensures a consistent color scheme throughout your website.
Here, you can edit the Theme, Default, and Custom colors:
- Theme: Colors set by your theme’s designers when creating the theme, used throughout your theme’s design.
- Default: The colors shown in the block color settings when editing your pages and posts.
- Custom: Define and name additional colors to use in your color palette.
To update the Theme colors, follow the instructions below:
- Click anywhere within the box under Palette.
- Click on the three dots next to Theme, then select Show details to expand the list of color areas in the palette.
- Each theme defines its own color areas. In our example, we can choose from Primary, Secondary, Foreground, Background, or Tertiary to edit that color:
- Use the color picker that pops up to select your desired color.
- Click Done to set your chosen color.
- Click Save in the top right corner to save your changes.
You can also add several Custom colors to your site’s palette. These will be saved and available for you to choose from the color settings of your blocks.
To add custom colors, follow these additional steps:
- Under Custom, click the + button.
- Choose your color from the color picker or enter a HEX, RGB, or HSL color value.
- Click on the name of the color (it will default to “Color 1”) and type a name for your new color.
- Click Done.
These steps are demonstrated in the following video:
In the color settings, right below Palette, you’ll see the option to edit the color for various elements of your site. Those elements are:
- Text: Choose a color to use for the regular base text across your site, not including links, captions, button text, or headings.
- Background: Choose a solid color or gradient for the background of your site. Learn more in our guide to Customize Your Site’s Background.
- Link: Choose a color for all the links on your site. Here, you can choose the Default color that shows for all links, as well as the Hover color that shows when someone places their cursor over a link:
- Captions: Choose the color of text used in Image block captions.
- Buttons: Set the color used in Buttons blocks. You can choose the text color and set a solid color or gradient for the buttons’ background.
- Controlling the hover color of buttons isn’t currently available. It’s possible to use CSS code to apply a hover color to a button.
- Headings: Set a color for Heading blocks across the site. You can choose the text color and set a solid color or gradient for the headings’ background.
- To choose a different color for each of the heading levels (H1 through H6), click the three dots next to Color to expand the options and click on your desired heading level. A check mark will appear next to the heading level, and you can then close the options to access the color settings for that heading level.
If you’d like to override the color for one specific text only (rather than all elements), you can set a different color within the individual block color settings in that specific post or page.
