Change Colors in the Customizer

If you’re using one of our classic themes, you can update your site’s colors under Appearance → Customize following the steps in this guide.

In this guide

1. Theme Support
2. Access the Color Settings
   1. Color Picker in the Customizer
   2. Choose a Palette
3. Background Color
4. Specific Elements

Theme Support

The settings described in this guide apply to classic themes that support Custom Colors.

To find out if a theme has Custom Colors support, activate the theme and go to Appearance → Customize. If the theme supports custom colors, you’ll see a Colors or Colors & Backgrounds section in the Customizer.

If that’s missing, the theme does not support custom colors. Consider switching to a block theme which gives you full control over your site’s colors.

Access the Color Settings

To access the color settings in the Customizer, follow the instructions below:

1. Visit your WordPress.com dashboard.
2. Navigate to Appearance → Customize.
3. Click on the color settings, which may be labeled Colors or Colors & Backgrounds depending on your theme.
4. On the next screen, you will see a series of circles. Click one of the color circles to see which elements it controls. For example:

5. A circle with an “X” through it means the theme you are using did not set a color for that area. Learn more.
6. Click a color to change it. Several color suggestions for you to choose from will pop up. Click any of the suggested colors to use them for your site:

7. You’ll also see a link to pick your own color below that. Click that link to add a custom color using the color picker.
8. The Default button will clear your custom color selections and revert to the theme’s default colors.
9. Once you’re done making changes, click the Save Changes button at the top of the customizer to save your colors.

Color Picker in the Customizer

You can choose a custom color using the color picker by clicking into each of the corresponding numbered sections as explained below:

1. Click on the link labeled pick your own color to open up the color picker.
2. Click on the colored box section to choose a different shade of the current color.
3. Drag the rectangular icon up or down to choose a different color.
4. If you already have a HEX color code that you’d like to use, you can paste it into the box area. This code will automatically update if you choose a different color using the other options above.

The color picker in the Customizer has a safety net for accessibility. If you try to choose a link color that is too similar to the background color, the color picker will automatically add contrast to keep your text readable.

Choose a Palette

Some classic themes include color palettes. To choose a color palette:

1. Navigate to Appearance → Customize.
2. Click on the Colors & Backgrounds option.
3. On the next screen, you’ll see the option to Choose a Palette.
4. When you see a palette you’d like to try, click on it to apply the colors to the live preview shown on the right side of the customizer. 
5. Click the More and Back buttons to scroll through all the available color palettes:

Color palettes are provided by COLOURlovers.

Background Color

For classic themes, you can choose a background color, pattern, or image if the theme supports it. To change the background on your classic theme, see this guide.

Specific Elements

If you do not see the option to update the color for a specific element on your site, the theme you are using does not have the option to manage that area through the customizer. You can either:

1. Use Custom CSS to give that element a different color, or
2. Switch to a block theme that gives you full control to customize the color of every element on your site.