Back to Support Design Your Site Change Your Site's Colors Using Styles

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.

Find the Color Settings

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:

  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

The remainder of this guide will explain each of these in more detail.

An arrow points to the Styles button in the Site Editor.

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

To update the Theme colors, follow the instructions below:

  1. Click anywhere within the box under Palette.
The color palette in the Site Editor.
  1. Click on the three dots next to Theme, then select Show details to expand the list of color areas in the palette.
  2. Each theme defines its own color areas. In our example, we can choose from Primary, Secondary, Foreground, Background, or Tertiary to edit that color:
Editing the color palette in the Site Editor.
Steps to update the Theme and Default colors in the Styles section of the Site Editor
  1. Use the color picker that pops up to select your desired color.
  2. Click Done to set your chosen color.
  3. 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:

Setting a custom Default and Hover color for links using the Block Editor.

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.

Was this guide helpful for you?

Not quite what you're looking for? Get Help!

Copied to clipboard!