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 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:

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.

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 learn more about using color on our site, check out this collection of the best color tutorials for web design.

If you have any questions or comments about changing the text color in WordPress, post your thoughts below!

Related Posts

5 Comments

  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: http://pics.competethemes.com/15b046c85af4. You’ll see the color changed once you switch the block back to visual editing like this: http://pics.competethemes.com/696a823ccbc5

  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.