Design Your Site

Customize Your Site’s Colors

To customize the colors on your site, you will use a different option depending on your theme:

Table of Contents

Change Colors in the Site Editor

If your site uses a theme that supports the Site Editor, you can change your site’s colors with the Colors settings accessible from the Styles button in the Site Editor.

Changing the colors in this section will change the corresponding colors on the entire site.

To access the Colors option within the Site Editor, follow the steps below:

  1. Starting from your dashboard, go to Appearance → Editor.
  2. Click on the Styles icon in the top right corner of the Site Editor.
  3. Click on the Colors option to open up additional settings.

On the next screen, you’ll be able to use the color picker to customize the color options on your site.

An arrow points to the Styles button in the Site Editor.
The Color Picker in the Block Editor

If you’re using one of the themes that support the Site Editor, you will access the color picker by navigating to Appearance → EditorStylesColors, or within individual block settings.

The color picker in the Block Editor supports both solid colors and gradients. Gradients allow you to select two or more colors to gradually blend into your background sections.

Solid Colors

You can select a custom color for elements like the text and links using the color picker. Click into each of the corresponding numbered sections as explained below:

How to set a custom color for the text or links in the Block Editor using the Color Picker.
  1. Click on the colored icon to open up the color picker.
  2. Click any of the existing colored dots to select a predefined Theme or Default color option.
  3. Click into the box area to set a custom color for the section corresponding to the colored icon you originally clicked in step #1.
  4. If you already have a custom 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 any of the other options shown above.
  5. Click on the dropdown icon to select a different color profile. You can choose between Hex, RGB, and HSL.
  6. Click and drag the circular icon left or right to increase or decrease the opacity or transparency of your chosen color.
  7. Click and drag the circular icon left or right to choose a different color.
  8. Click and drag the circular icon anywhere within the box area to select a different shade of the current color.
  9. Click to copy the current color code for use on another section of your site.
  10. Click the three dots to reset any of the selected color options. This will return the colors you reset to the theme’s default colors.

Gradient Colors

For backgrounds, the color picker in the Block Editor will allow you to choose between Solid and Gradient color options, as explained below:

How to set a custom color for the background in the Block Editor using the Color Picker.
  1. Click on the colored icon to open up the color picker.
  2. Click to set a Solid color for your background. This works the same way as the text or link colors covered above.
  3. Click to set a Gradient for your background.
  4. Click any of the existing colored dots to select a predefined gradient for your background.
  5. Click any of the circular icons within the box area to select a custom color to include in the gradient. You can also click any other section within the box to add additional colors.
  6. Click on the dropdown icon to select the Type of gradient. You can choose between Linear and Radial.
  7. Edit the number in the box to select a custom value for the gradient Angle. This only appears when you’ve selected the Linear gradient Type.
  8. Click and drag the small colored dot within the circle to adjust the gradient Angle. This will automatically replace the value in the Angle box covered in #7 above.
Palette

Palettes are the default color options that your theme designers set when building the theme. Here, you can edit the Theme, Default, and Custom colors.

Changing the colors in this section will change the corresponding colors presented within the block settings on the whole site.

To update the existing Theme and Default colors, follow the instructions below:

  1. Click anywhere within the box under Palette.
The color palette in the Site Editor.
  1. On the next screen, under Solid, click on the three dots, then select Edit colors.
  2. Click on any of the boxes showing Primary, Secondary, Background and so on, depending on the color you’d like to edit.
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 custom colors as needed.
  2. Click Done to record your chosen color.
  3. Click Save in the top right corner to save your changes.

You can also add several Custom colors to the site’s palette. These will be saved and available for you to choose from when you add new blocks to your site.

To add custom colors, follow the demonstration in the video below:

Elements

In the Site Editor, right below Palette, you’ll see the option to edit the color for various Elements of your site. Setting a custom color here will update the color for that specific element on the whole site.

If you’d like to override this color, you can do that by setting a different color within the individual block settings in a specific post or page.

Background

Use the color picker to set a Solid or Gradient color for the background of your whole site.

Text

Choose a color to use for the Text across your whole site.

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 points their cursor on a specific link.

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

Set a color to use for the Headings on the whole site. You can either click on All to set the same color for all heading levels, or click on H1 through H6 to choose a different color for each of the heading levels.

Setting a custom color for headings using the Block Editor.

You’ll also find the option to add a Background color for the heading levels when you scroll lower on that screen.

Buttons

Set a color for the Text and Background of all the Buttons on your site.

↑ Table of Contents ↑

Change Colors in the Customizer

If you’re using one of our classic themes, you can update your site colors under Appearance → Customize using the Custom Colors tool.

Custom Colors tools are available for themes that support this function. 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 at this time. Consider switching to one of the new Site Editor enabled themes which allows you to change the colors on your site through the Styles button in the Site Editor.

Custom Colors is designed to make it as simple as possible to update your site’s color scheme with just a few clicks. You can use it to:

The Color Picker in the Customizer

If you’re using one of our classic themes, you will access the color picker by navigating to Appearance → Customize or within individual block settings.

The color picker within individual block settings will function the same way as the color picker in the Block Editor.

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

  1. Navigate to Appearance → Customize.
  2. Click on Colors & Backgrounds.
  3. On the next screen, click on the color you want to change.
  4. Click on the link labeled pick your own color, which will open up the color picker.

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

The Color Picker in the Customizer.
  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 custom 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 any of the other options shown 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

To choose a color palette for your classic theme:

  1. Navigate to Appearance → Customize.
  2. Click on the Colors & Backgrounds tab.
  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.
Several color palettes to choose from with the heading "Choose a Palette" and a "More" and "Back" button.

Color palettes are provided by COLOURlovers.

Change Colors

To change the colors on your classic theme:

  1. Navigate to Appearance → Customize.
  2. Click on the Colors & Backgrounds tab.
  3. On the next screen, you’ll see the option named Colors.
  4. To see which colors are mapped to which areas of your theme, click one of the color circles, and the color role will appear below.
Four circles in a row, a black one, an orange one, and two gray ones with X's in the middle of them.
  1. A circle with an “X” through it means the theme you are using did not set a color for that area. Learn more.
  2. Click a color to change it. A modal with several color suggestions for you to choose from will pop up. Click any of the suggested colors to use them for your site.
  3. 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.
Custom color suggestions in the Customizer, with the option to "pick your own color" in the bottom.
  1. The Default button will clear your custom color selections and revert back to the theme’s default colors.
The Default button within the Colors & Backgrounds setting in the Customizer.
Background

For classic themes, you can choose a background color, pattern, or image if the theme supports it.

Background patterns are loaded based on the background color of the last selected color palette for your site

To change the Background on your classic theme:

  1. Navigate to Appearance → Customize.
  2. Click on the Colors & Backgrounds tab.
  3. On the next screen, you’ll see the option named Background.

Next, you can customize your site’s background by clicking into each of the corresponding numbered sections as explained below:

Options for updating the background in the Customizer. You can edit the palette, upload an image, pick your own color, or select a pattern.
  1. Click into the colored box area to pull up the options available for customizing the background on your theme.
  2. Click on Palettes to select a new color palette to use on your site.
  3. Click Select Image to choose an image to use for your background. This option will only appear if your theme supports background images. Learn more about Background Images.
  4. Click on any of the automatic color suggestions to use it for your site.
  5. Click on the pick your own color link to open up the color picker and use it to set a custom color for your background.
  6. Click on any pattern to use it as the background for your site.
  7. Click on the More button to load additional patterns to choose from. After you’ve clicked the More button once, another Back button will appear next to it. You can use it to load the previous patterns within the selection. Background patterns are provided by COLOURlovers.
How to pick a background pattern using the More and Back buttons in the Customizer.

Background Images

After you’ve selected an image to use for the background of your site, an Options button will appear directly below it. Click on that, and you’ll see several settings to manage the display of your background image as explained below:

Options for adjusting the position of a background image in the Customizer, along with the underlying color.
  1. Click Select Image to choose an existing image from your media library, or upload a new one.
  2. Click Options to open up the additional settings available for your background image display.
  3. Click into the icons to adjust the position of your background image.
    • Position controls where the background image is aligned: left, center or right.
    • Repeat determines if an image appears once, repeats vertically, repeats horizontally, or tiles.
    • Fixed Position means the image stays fixed in place when you scroll up and down the page.
    • Underlying Color is the color that loads behind the background image.
  4. Click into the colored box to open up the color picker, where you can select a different Underlying Color for your background.
  5. Click Hide background image to remove the current image and select a different one, or use a solid background color or pattern instead.
Specific Elements

If you do not see the option to update the color for a specific element on your site, this means 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 one of the Site Editor enabled, which can customize the color of every element on your site.
Saving Changes

Once you’re done making changes, click the Save Changes button at the top of the customizer to save your colors.

The Save Changes button at the top of the Customizer.

Not quite what you're looking for?

Get Help