A Musing Tutorial: Using Color Palettes to Customize your Blog

Okay. I bet some (or a lot) of you are looking at my color palettes and wondering, “What am I supposed to do with these, anyway?” I understand. There’s something of a disconnect between looking at something pretty, and knowing how to apply it in a practical way.

So this tutorial will be the first of several (or a lot) that will not just make suggestions, but actually show you how to put palettes to work for you. I’m going to start off with November’s Palette of the Month (POM): Paris Reflection.

Paris Reflection color palette

Colormusing’s Paris Reflection color palette, our November Palette of the Month. Yep. Sexy. (Click the palette to see it at Colormusing.com.)

This is a great palette to start with, because it has a nice range of colors and color types: neutral (charcoal grey), tonal (the 3 colors on the right), and a brighter accent hue (gold). Right off the bat, I think I can use the charcoal for text, one of the tonal colors for links, and the gold for embellishments like page dividers. But let’s see how this would work on an actual blog page.


Note: Because my blogs are on WordPress, that’s what I’ll be using as my example in this tutorial. If you’re not using WordPress, these instructions might have to be modified, depending on your blog platform’s options.


Here’s how this palette looks when the PSD file is opened in Photoshop (PS):

Palette PSD file

When opened in PS, you can see all the layers that come with Colormusing palettes, including separate layers for each color, and text layers with color information. (Every CM palette comes with a PSD file like this, with all these layers, plus a separate single-layer JPEG file.)

Now we’ll put some of that color information to good use!


Tip: For a blog (or other screen-based use), you’ll probably only need the hex codes; these are the 6-digit numbers starting with #. The CMYK values included in each palette’s PSD file are generally used in things that will be printed (I’m planning tutorials for these also).


Well, I just pulled up one of my other blogs, which is clearly suffering from some neglect— making it a great candidate for a makeover! Here’s what it looks like now:

Lindy Hops blog

A screen shot of my Lindy Hops! blog. Oy. See the Customize button on the right? Let’s start changing some color here. Please.

When I click on the Customize button, then Colors & Backgrounds, this is what comes up:

Customizing colors

The Customize— Colors & Backgrounds interface. When I hover the mouse over the background color bar (upper left), a Change button shows up.

Clicking on any of the Featured palettes changes the background color; when I clicked on the red/black palette, the background changed from green to black. But I want to use one of my own palette colors (she whined). So I changed back to the original green color bar, clicked the Change button, and got this:

Changing the background color

Finally, I’ve found the path to a custom background color! I’ll just click on the pick-your-own-color link and…

Changing the hex#

Hurrah! This came up! Now all I need to do is copy and paste my new hex# into the handy box, and…

New background color

It worked! After pasting the hex#, the background automatically updated (as did the color bar in upper left). By the way, I used the color on the far right of the palette for this.

Hmm. Now that I’ve changed the background, suddenly the bold header text has changed to red. (If you scroll back up and look at the original blog page, this text is the same color as the background.) And red does not look so great with my new background color. And after a little investigating, it looks as though I can’t change that text color without going the Custom Design route (this requires an upgrade). It’s possible that this is a limitation of the theme I’m using; I’ll experiment with different themes and get back to you on this.

Hey, this stuff happens to all of us, right? We think we’ve got it figured out, and… roadblock! But I’m sure there’s a solution, and when I find it, I’ll post an update.

Meanwhile, play around with new hex codes on your own blog. On WordPress, you’re not committed to the changes until you hit the Save & Publish button, so try some new colors and see what happens!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s