How to Change the Color of Text in WordPress

Disclosure: This post may contain affiliate links. Purchasing a product through one of these links generates a commission for us at no additional expense to you.

Are you using Gutenberg yet?

If not, this post may be the reason you upgrade to WordPress 5.0.

Changing the color of the text in your posts used to be a huge pain, but with the Gutenberg editor, it’s easy!

In this post, you’ll find a simple method you can use to change both the text and text background color of any paragraph.

Let’s get started!

Change the text color

UPDATE: You can watch my new video tutorial to learn how to change the color of paragraphs, headings, and individual words:

Subscribe to Compete Themes on Youtube

WP Site Partner logo

Too busy for WordPress? We can customize your site for you.

WP Site Partner is our new maintenance and customization service for busy WordPress users.

Learn More

Start by visiting the post editor and click on a paragraph you want to modify.

In the right sidebar, you’ll find a few options including an entire section called Color Settings.

Paragraph Color Settings

Inside you’ll find the available settings for changing the text and background colors.

Color Settings

Selecting any color instantly updates the color of the text in the paragraph block you’re editing. This makes it very fast to preview a few colors without needing to save or update your post each time.

While the default colors are pretty diverse, you can set custom colors too.

How to set a custom color

With the color panel open, click on the gradient wheel to display the custom color picker.

Custom Color Option

Inside the color picker, you can use the slider to change the hue and click-and-drag within the color picker box to set the brightness and saturation.

Color Picker

The color picker is great for finding a new color, but there’s a good chance you have an exact color picked out already to match your brand. If so, there’s a simple option available.

Instead of using the color picker, type or paste the hexadecimal code here:

Hexadecimal Color Code Input

Hexadecimal color codes are perfect for setting precise colors. You can use this technique to set a custom color for both the text and background of any paragraph block.

If you need help picking colors, check out this collection of color tutorials.

Keep customizing

The color options are currently only available for paragraph blocks, but we see that change in the future as Gutenberg gets more advanced.

Regardless, the existing color settings are far superior to the ones available in the old TinyMCE editor WordPress used for so long.

If you want to keep customizing your WordPress website then check out this massive list of customizations:

31 Easy Ways to Customize Your WordPress Website

Please share this post with someone else before you go!

Ben Sibley
Ben Sibley
This article was written by Ben Sibley. He is a WordPress theme designer & developer, and founder of Compete Themes.