How to Keep Track of the Colors in Your WordPress Theme
This post may contain affiliate links which means I make a commission if you shop through my links.
Disclosure Policy
Your blog colors are an important part of your branding. So, you really should know the hex codes for the colors in your WordPress theme and also how to find them quickly.
Here are some tricks to keep track of the colors that you use on your blog and a free download too.
Why You Need to Know Your Brand Colors
Even if you don’t do your own web design – you will need your blog colors to use in:
- illustrations for your posts
- social media images and profiles
- your marketing materials
- downloads that you create, and
- anywhere you display your brand
To use online, you will identify your blog colors by their hex code.
This is a string of six numbers that follow a “#’ symbol.
How to Find Your Hex Codes
If you have an established blog, hopefully you have an idea of what colors your blog uses already.
But if you don’t, you can find this out a few different ways – but you will have to do a bit of sleuthing.
Here are some things you can try:
Your Blog’s Style Sheet
Look at your blog’s style sheet – the colors are usually defined at the beginning.
The Customize Options in Your WordPress Dashboard
Go to the Appearance–>Customize tabs in the left column of your WordPress dashboard.
Your theme may have a colors tab here with the info you need.
Digital Color Meter on a Mac
if you use a Mac computer, go to the Utilities folder in your Apps and open the Digital Color Meter app.
From the dropdown select “Display Native Values”.
Now when you scroll over different parts of your screen with your cursor, you will get values in Digital Color Meter for R:, G:, and B:.
These will display in a format that looks like “0xXX”
The values for the last part of the string – XX will change depending on the color you are scrolling over.
Take the last two letters from each value and put them all together to get the 6 character hex code.
Where to Store Your Blog Colors
Now that you have identified your blog colors – you want to store them for easy access.
The last thing you want to do is waste time looking for your hex codes every time you need a color.
There are many ways to keep your codes ready at your fingertips.
The Old Fashioned Way – Write Them Down
Keep a written cheat sheet right next to your computer use it to keep track of your blog’s primary color scheme.
This would include the main color, complimentary colors, link colors and any variations or contrasting colors that you may want to use more than once.
To make it easier you can find a Blog Color Cheat Sheet in my free member library. Simply sign up for our newsletter to access.
Keep Track of your Brand Fonts Too
Here’s a nifty little trick, write the names of the fonts you use on the cheat sheet, too.
Use a Keyboard Shortcut App
In addition to my blog color cheat sheet, I also use an app called TextExpander. (You can read my Textexpander Review here.)
This is a keyboard shortcut app that saves me a ton of time and frustration.
Basically I assign a keyboard shortcut for things that I type repeatedly – like the hex codes for my blog colors.
For example, one of my brand colors is a dark pink.
In TextExpander I created a shortcut called “;dpi”. (short for dark pink)
Whenever I need to call up the hex code for this color – I just type “;dpi” and TextExpander pops it in.
Click here to get 20% off of TextExpander.
Store Your Blog Colors Right Inside the Apps You Use
Another quick way to access the hex codes for your blog colors is to keep them right inside the apps you use most often.
Your Photo Editing Apps
Not all photo editing apps have this capability – but I do know that the following do:
Form Builders
I am not familiar with every form builder out there – but if you create forms in things like:
you should be able to store your colors right inside for quick access.
My Favorite Way to Keep Track of My WordPress Theme Colors
I am a huge fan of TextExpander and have used it for so many years. I honestly don’t think I could live online without it.
Calling up a hex code with a short keystroke is major time saver.
Sure, you can store your Brand Kit in Canva or the like – but there are so many times that you need your WordPress them colors in other situations.
- You might be testing out a new app.
- The app you are using may only allow you to store a limited number of colors.
- Maybe you are testing out a different color scheme on your blog.
In all these situations – if you add the shortcuts to TextExpander, all you need to do is type in a shortcut and the hex code populates.
I know what you are thinking – “but then I will have to remember all the shortcodes!”
It is far easier to just keep the TextExpander window open on your computer along side the app you are working in, than searching for hex codes in your WordPress theme.
There is no copy and pasting involved. You just type in your shortcut and BOOM – it’s there.
Searching for Your Blog Colors is a Waste of Time
As a blogger you have plenty to do.
Don’t keep reinventing the wheel by hunting through your style sheet for hex codes every time that you need them!
And try to store the colors in the apps that you use most.
Happy Blogging!
