Change Your Site’s Colors Using Styles

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

1. Video Overview
2. Find the Color Settings
3. Define a Color Palette
   1. Theme Colors
   2. Custom Colors
4. Customize the Colors of Elements

Video Overview

Find the Color Settings

If your site uses a theme that supports the site editor, you can change your site’s color scheme 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:

1. In your dashboard, go to Appearance → Editor.
2. Click on Styles on the left, or select the Styles icon as shown here. The icon looks like a black-and-white circle.
3. Select Colors.
4. Select Palette to choose your site’s default colors or choose from the following elements on your site:
   • Text
   • Background
   • Link
   • Captions
   • Button
   • Heading

Changing these colors will affect the colors used for all those elements throughout your site. The remainder of this guide will explain each of these in more detail.

To change the color of a specific piece of text or other element only, click on the block and change that block’s color settings, rather than using the Styles options described in this guide.

Define a Color Palette

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.

Theme Colors

To update the Theme colors, follow the instructions below:

1. Click anywhere within the box under Palette.

2. Click on the three dots next to Theme, then select Show details to expand the list of color areas in the palette.
3. Each theme defines its own color areas. In our example, we can choose from Primary, Secondary, Foreground, Background, or Tertiary to edit that color:

Steps to update the Theme and Default colors in the Styles section of the Site Editor

4. Use the color picker that pops up to select your desired color.
5. Click Done to set your chosen color.
6. Click Save in the top right corner to save your changes.

Custom Colors

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:

1. Under Custom, click the + button.
2. Choose your color from the color picker or enter a HEX, RGB, or HSL color value.
3. Click on the name of the color (it will default to “Color 1”) and type a name for your new color.
4. Click Done.

These steps are demonstrated in the following video:

Customize the Colors of Elements

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.