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 WordPress site’s color palettes.

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

In this video, you’ll learn how to change your site’s colors on WordPress.com using the Site Editor’s Styles. It covers finding the color settings, defining a color palette with theme and custom colors, and customizing the colors of individual elements like text, backgrounds, and links.

You change your site’s colors in Styles, which requires a block theme. To check which type your site uses, go to Appearance in your site’s dashboard. If you see Customize instead of Editor, your site uses a classic theme; see change colors in the Customizer instead. If you see Editor, 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 Edit 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 or Duotone tab to customize the default color gradients and duotone filters 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.

Your site’s palette holds gradients and duotones as well as solid colors. A gradient blends two or more colors together. A duotone is a two-color filter you apply to images. You can add your own gradients and duotones alongside the ones your theme provides.

To add a gradient or a duotone to your palette, follow these steps:

1. Click Edit palette.
2. Select the Gradient tab or the Duotone tab.
3. Under “Custom“, click the + button.
4. Set the colors:
   • For a gradient, set the colors, type, and angle.
   • For a duotone, set the shadow color and the highlight color.
5. Click the name and type a name for your new gradient or duotone.
6. Click the “Review change” or Save button to save your changes.

To remove a gradient or a duotone from your palette, click the ellipsis menu (⋮) next to “Custom“, select “Show details“, then click the minus button (−) beside the one you want to remove. Your custom gradients and duotones are available in the block color settings when you select a gradient or select a duotone filter on a block.

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.
• Citations, Inputs, and Selects: Set colors for citation text, text input fields, and drop-down menus on your site.

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.

The WordPress Agent can help you build a color palette that reflects your brand and looks great across your site. When you open the WordPress Agent in the Site Editor (Appearance → Editor), the WordPress Agent can also change your site’s colors for you, such as the color of your headings and links. Review the change, then save your changes in the Site Editor. Here are some sample prompts you can copy and use:

• “Suggest a color palette for a wellness and yoga blog.”
• “My logo is navy blue and gold — suggest a color scheme for my site.”
• “What heading and background color combination is easiest to read?”
• “How do I choose colors that look consistent across all my pages?”

AI agents can update the colors across your whole site, including text, links, headings, buttons, and the background. Here are some things you can ask an agent to do:

• “Change the button background on yourgroovysite.wordpress.com to #E4572E with white button text.”
• “Set all headings on yourgroovysite.wordpress.com to navy blue.”
• “Show me my theme’s color palette on yourgroovysite.wordpress.com, then use its accent color for all links.”