WordPress color customizer

How to Easily use the WordPress Color Customizer for the Look You Want

WordPress color customizer
Many WordPress themes today give you options about what colors to use.

Some are presets — predefined colors or color combinations that you select by clicking a link. Others, though, let you choose the exact color you want.

The tool that makes it possible is the color customizer.

To see just what sort of color choices your theme offers, navigate to Appearance / Customizer, then select Colors.

Color Customizer

This particular theme is set up for color choices for the background color only.

color customizer - background color

Using the Color Customizer

The small  area to the left of the words, “Select Color” shows the current color — in this case, white. Click the button to open up the color customizer.

color customizer

There are several ways to choose another color.

Choose a commonly used color

The row of colored squares at the bottom represent colors that are commonly used on websites. Click any one of them to choose it as is.

It now shows up at the top as the current color. Next to it is the hex code — this is a 6-character code preceded by the pound / hash sign.

Notice the bar on the far right. This controls the color transparency. Slide it down for a more see-through look, or up for a more robust version of the color. As you slide it up or down, the hex code changes.

Select a different color with your mouse

Watch what happens when you grab the colored circle and drag it with your mouse. Use it to find an exact shade. Once you pick a color, you can use the bar on the ride to adjust the transparency.

Select a color by typing in the hex code

If you already know the hex code for the color, type it into the box (remember to start with the pound sign).

Once you’ve selected a color, remember to click the Save & Publish button at the top of the customizer.

For more information on choosing colors for your website, check out this article, or this one. Or click here for more WordPress design tips.

29 Shares
Tweet18
Share4
Pin3