Have you ever wanted to add a custom colour to text in WordPress but can’t find the colour you want to use in the default palette? Perhaps you’re new to WordPress and don’t know how to add a custom colour. Or perhaps you know how to add a custom colour but don’t know how to find the colour(s) you want to add.
In this video, I show you a few tricks you can use to create custom colours on the fly that you can quickly apply to your text.
Below is the text version of these WordPress tips and tricks for those who prefer to read rather than watch.*
So, why would you want or need to apply a custom colour to text in your WordPress blog or website?
The standard WordPress colour palette is somewhat limited and may not include your brand colours or any other specific colour you may need to copy, especially out of the box, if you have a basic WordPress theme with limited customization capabilities or you need a colour from someone else’s colour palette (or even your own website).
If you have a little more experience, you can either install a colour palette plugin or, if you know some CSS and HTML, you can create custom colours to use on your text using classes or ID’s and defining them in the WordPress customizer’s additional CSS widget.
There are also a ton of WordPress plugins you can use to create custom colours and colour palettes, but maybe you don’t want to overload your website with anymore plugins or, if you’re brand new to WordPress, you don’t know where to start. If you don’t know any CSS and HTML, you’re stuck with the theme’s colours and the default colour palette.
So, I’m going to show you a few methods you can use to pick your colours, create custom colours and apply them to your text.
Picking individual custom colours
If you’re choosing colours from yours or someone else’s website there are a couple of different ways you can determine the colour you want to use and then use that colour to create a custom colour for text on your WordPress page.
Method 1: Finding the custom colour in the theme’s CSS using the element inspector
- In another window, go to the web page with the colour you want to use
- Highlight the element or text that is using that colour
- Right click and choose “Inspect Element” or type Q
In the left hand side of the inspector is the HTML code, in the right hand side are the CSS styles, where you will see the colour is defined.
- Scroll until you find the colour you want to use—you’ll see a spot with the colour in it and a Hex #beside it (the number symbol followed by a combination of 6 letters, A-F, and numbers 0-9)
- Select the Hex # and copy (right click copy or CTRL C)—you only need the 6 letters and numbers not the symbol or semi-colon.
- Go back to the page you are editing and highlight the text where you wish to use the copied colour.
- Click the arrow next to the “Text Color” picker icon in the ribbon and click “Custom.”
- Click inside the input field next to the # symbol.
- Highlight or delete the Hex # already in the box, and paste (CTRL C).
- Click one of the other input fields to be see the colour appear and to make any adjustments.
- Click OK and you’ll see the colour appear on your highlighted text when you deselect it.
Method 2: Picking your custom colour using a browser plugin such as ColorZilla
If you don’t already have ColorZilla installed and you have Firefox or Chrome on your computer, you can quickly download the plugin in seconds and an eye-dropper will appear in the top right corner of your browser. Once downloaded/installed, you can easily pick colours from anyone’s website even your own (if you want to match your branding).
- In another window, go to the web page with the colour you want to use.
- Click the eyedropper—you’ll see the ColorZilla tool bar appear.
- Move your mouse to the colour you wish to use.
- When you see the colour you wish to use appear in the tool bar, left click. This will copy the colour to the clipboard.
- Follow steps 6-11 above.
Using ColorZilla, you can choose several colours from the page to create a colour palette. Each time you left click, the colour is copied to the clipboard. You’ll only be able to paste the last one in the clipboard during steps 6-11. However, all the previous colours that you picked remain in the ColorZilla “color history” palette until you clear the history.
To choose a previously copied colour, click the eye dropper, then “color picker” followed by the colour you wish to use. You can then copy the hex number from the “color history” drop-down.
What if you want to create a custom colour palette?
Paletton
If you’re not sure what colour you want to use or if you want complementary or contrasting colours to go with your main colour, there are a couple of tools I like to use: l Paletton’s colour palette creator and Adobe Color’s palette creator.
With Paletton, if you know your primary colour, just paste it into the “Base RGB” input box. Paletton will then automatically create a colour palette for you. You can choose from a number of automatic colour combinations to create your very own colour palette. You can also adjust individual colour tones and shades in your palette or create a custom palette.
If you want to see how the colours look together before you use them, you can view examples to see how they look in web-page layouts. Each palette is given an ID that you can share, and you can even save an HTML file to your bookmarks to refer to later.
Adobe Color
Similarly with Adobe Color, when you paste in your first custom colour, you can create a variety of automatic colour combinations and adjust your colour palette to suit your needs. However, you need an Adobe account ID to save your palette.
In both cases, you can copy the Hex numbers and simply create custom colours in your page editor.
I hope you enjoyed the video and that you found it useful. If you did, please let me know if the comments, here or on YouTube and feel free to share with anyone else that may find it useful.
*This is not an exact transcript of the video and may include additional information or steps.
