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.

This feature is available on sites with our WordPress.com Premium, Business, and Commerce plans, and the legacy Pro plan. For sites on the Free and Personal plans, upgrade your plan to access this feature.

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 find Editor here, you can change your site’s colors by following these steps:

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.

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:

1. Click anywhere within the box under Palette.

2. Click on the “color options” menu (⋮) next to Theme, and select Show details in the drop-down to expand the details of the theme colors.
3. Click any of the color swatches to change a color, or click the Gradient tab to customize the default color gradients for your site.

4. Click the “Review change” or Save button 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:

1. Under “Custom“, click the + button.
2. Select 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 the “Review change” or Save button to save your changes.

In the color settings, right below “Palette“, you’ll find the option to edit the color for various elements of your site. Those elements are:

• Text: Choose a color to use for the default 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 select the text color and set a solid color or gradient for the headings’ background.
  • To select 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.