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.
Inside you’ll find the available settings for changing the text and background colors.
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.
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.
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 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.
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!