One of the wonderful things about WordPress is the massive design and development community that supports it. There are thousands of free themes available for every level of author and coder to work with. When selecting a WordPress theme it is easy to find a perfect layout and design. On some occasions the colour scheme can be in conflict with pre-determined brand colours, or the desired look and feel. When selecting a WordPress theme it is easy to find a perfect layout and design. On some occasions the colour scheme can be in conflict with pre-determined brand colours, or the desired look and feel. This tutorial will help you quickly and effectively match a colour scheme to a brand, and obtain the right look and feel.
There are two assumptions being made in order for this to be successful. The first is that the theme copyright allows you to make modifications (almost always the case with free WordPress themes). The second being that the theme you are working with has a good colour base to begin with. For this demo I am using the Titan theme by The Theme Foundry because they produce a high-quality product with elegant code.
WordPress Theme Titan - Before Colour Modifications
The Tools You Will Need
- Photoshop (or a free, Open Source equivalent such as Gimp)
- Firefox, Sea Monkey, Flock, or Google Chrome browser
- Web Developer Toolbar for Firefox (and others browsers as mentioned above)
Begin by activating and opening your theme in Firefox. In the Web Developer toolbar click the Information button, and select View ‘Color Information‘.
Benchmark Your Colour Palette
- Take a screenshot of the colour information and open it in Photoshop
Color Palette for Titan Theme Before Adjustments
Adjust the Colour Palette
- Open the Hue / Saturation tools (Image > Adjustments > Hue / Saturation)
- Adjust the hue and saturation levels to match your preferred colour
Color Palette for Titan Theme After Adjustments
Apply Your New Colour Palette
- Using Photoshop’s colour picker, get the new values for each swatch
- Open the style.css file in your preferred editor
- Using the Find / Replace function in your editor, update the colours en-masse. As an example, find colour ‘#443b31′ and replace with colour ‘#3c3144′
- Repeat for all new colours
- Save your style.css file
- Admire your updated theme or adjust individual colours as required
Titan Theme Before and After Colour Modifications
The relationship between colours in this theme were well balanced to begin with. Adjusting the hue and saturation for all colours at once preserved the harmony created in the original theme. In this case we were working with analogous colours but the results can be different depending on the contrasts in other themes.
You should find that this method allows you to easily integrate pre-determined colours (i.e. an existing brand or fixed logo colours) with an existing theme. The time saved makes for very effective productivity. How do I know this? It took twenty-five minutes to activate the theme, benchmark the colours, adjust, and update the style.css file. By comparison, making screenshots and writing about it took an hour and a half. In that same hour and a half I could have completed three different colour versions for a client, with time left over to make and enjoy a cup of good coffee.
If you know of an alternate or simpler method your comments are always welcome and appreciated!