Design, Upgrades

Custom Colors

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 choose a color palette, view color suggestions, refine with the color picker, and apply background patterns.

Table of contents

Getting Started

Custom Colors tools are available for themes with Custom Colors support. To find out if a theme has Custom Colors support, activate the theme and go to My Site(s) → Appearance → Customize. If the theme supports custom colors, you’ll see a Colors & Backgrounds section in the Customizer. If that’s missing, the theme does not support custom colors at this time.

↑ Table of Contents ↑

Choose a Palette

When you see a palette you’d like to try, just click on it to apply the colors to the live preview shown on the left. Click the More and Back buttons to scroll through all the available color palettes.

Choose a color palette

Color palettes are provided by COLOURlovers.

↑ Table of Contents ↑

Change Colors

Click a color to change it. A circle with an “X” through it means the theme you are using did not set a color for that area. The Default button will revert back to the theme’s default colors.

color pallets

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.

color pallets for links

↑ Table of Contents ↑

Color Suggestions

Click each color in the color grid to view customized color suggestions.


↑ Table of Contents ↑

Color Picker

To open the color picker, click on a color in the current palette and then click on the link that says pick your own color. The color picker 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.


Each color on the web has a code. When a color is active, you can see its Hexadecimal color code such as #123456 just below the color picker. To insert your own color code, type into the field and press the tab key.

enter-color code

↑ Table of Contents ↑

Background Patterns

Background patterns are loaded based on the background color of the last selected palette above. Click the More and Back buttons to scroll through all the available background patterns.

pick a background pattern

Backgrounds patterns are provided by COLOURlovers.

If the theme you are customizing has background image support built in, you will see a large rectangle at the top of the Colors panel. Hover over that rectangle and the word “Change” will appear. Click the rectangle to use the media manager to select or upload a background image of your choice.

change background pattern

Background images have repeat, position, and attachment options.

  • Position controls where the first image is placed: left, center or right.
  • Repeat determines if an image appears once, repeats vertically, repeats horizontally, or tiles.
  • Fixed Position means the images stays fixed in place when you scroll.
  • Underlying Color is the color that loads behind the background image.

↑ Table of Contents ↑

Saving Changes

Once you’re done making changes, select the Save Changes button in the customizer to save your colors.

↑ Table of Contents ↑

Fun Facts

The color picker’s code name is Iris. Our themes have been set up with special color maps so each color can easily find its place. Not only that, color contrast is carefully calculated to make applying colors as easy as pie.

You don’t have to be a tetrachromat or have studied the intricacies of color theory like hue, chroma, saturation, value, tones, shades, and tints to find the perfect palette for your site—but knowing a little bit about color theory could go a long way. Color evokes emotion, sets context, and has impact. Choose your colors with purpose!

Not quite what you're looking for?

Get Help