How to Change the Color of Text in WordPress

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

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 is a WordPress theme designer & developer, and founder of Compete Themes.

Take our 7-day Email Course for FREE

You'll learn how to make your WordPress site look better, load faster, and make more money.

Invalid email address
You'll get one email a day for the next 7 days


  1. Deva Deva

    Thanks for your good information

  2. Rama Rama

    Nope! This does not work, sorry.

    Is there another way to do this? I only need to change the colour of one word, in the old editor, this was super easy!

    As a side note… This block editor is a step backwards to document editors of the 80’s yikes! Terrible 🙁

    • Ben Sibley Ben Sibley

      Hey Rama,

      This method of changing text color definitely works. You can try it on a new install of WordPress to verify. If changing colors this way does not work on your site then it means there is a bug in your theme or a plugin that is breaking this core WordPress functionality.

      If you’d like to change the color of one word within a paragraph, you can edit the block as HTML and add some code like this: You’ll see the color changed once you switch the block back to visual editing like this:

  3. dilly dilly

    Is there a way to edit header colors, beyond editing in html? This is a huge step backwards.

    • Ben Sibley Ben Sibley

      Look like this isn’t an option in WP but there is a plugin available for this feature.

Comments are closed.

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.