Colors and Your CMS

When you use a content management system to take care of your own website, you can change your content whenever you like.

This is a good thing. Fresh content brings your site to the attention of the search engines.  It’s also good to be able to update the information immediately when things change, to reflect seasonal changes, and to add new products and services at any time.

At the same time, it’s easy to go astray. I’m working right now with Oyova on a website that’s handled by a proprietary CMS. The owners of the website have a great deal of control; they can change the background colors in their rotating banners as well as the text and the images. The system comes with very limited content and a pretty random set of colors, which makes sense for a basically DIY site. It’s not so good if you leave it the way it came. The screenshot here, it seems to me, shows the kind of color scheme that makes people want to leave quickly.

I’ve seen the same problem in other settings: turnkey stores where clients upload their own product images, blogs where they choose their own photos, even traditional websites when people decide to change out the header image without thinking about the background.

So, when you”re in charge of your own images, how can you make good color decisions? Choosing an image that works with the colors of your website is up to your eye for color. When we planned FreshPlans, our educational site, we knew we wanted to be able to use images with lots of different colors, so we chose background colors that accommodate all kinds of shades: sage green and gray. If you didn’t plan ahead like this, then you need to check how your chosen image looks once it’s in your site. If you don’t have a good eye for color, you should find someone who does.

For background colors, though, you can use some simple strategies.

First, let me tell you a little about the color system commonly used online. Colors have names composed of six letters and/or numbers, called hex codes. The numbers tell your browser how much red, blue, and green to put into the color, and you can make 16 million different colors with hex codes, from #FFFFFF white to #000000 black.

W3schools offers more technical detail for those who’d like to understand the system. Webmonkey’s hex codes color chart is a nice reference for those who’d like to see examples.

The first option for making sure that your background colors work with your site design is to find the colors your designer used. Here’s how:

• Use CTRL+U or “View source” to look at your site’s source code. Don’t worry if you can’t read it; just use Edit>Find to search for strings of six letters or numbers with a # sign. The colors you need should be in your css file, which should be a link you can identify because it is marked with

link rel="stylesheet" type="text/css" href="URL"

• Depending on how your site is built, you may have a lot of numbers like that or just a few. Either way, you should be able to use all of them as background colors for banners and boxes and feel confident that they will work with your website.
• If you can’t find them in your site, you can get a pretty good approximation by taking a screenshot of your site, saving it as an image, and uploading it at the Big Huge Labs Color Palette Generator. The generator will give you hex codes for the colors it sees. There can certainly be something lost in the translation, but I find that this works well.
• If you have Photoshop, you can open a screen shot there and pick the colors with the eyedropper tool.

One or more of these methods ought to give you light, medium, and dark shades that you can rely on. Write them down somewhere, preferably in order from light to dark.

It may be, however, that just finding the colors used in your site won’t do the trick for you. If you don’t have many color choices, you might want a contrast. If you have mostly dark colors, you might want something lighter to put your text on.

The ColorSchemer will take a hex code and suggest a color palette for you.

For example, given the deep violet which is next to the rotating banner in the example site, the color schemer offered all these complementary colors.

You can lighten the scheme to come up with more colors to put your text onto or darken it to come up with colors for text (dark on light is more readable).

In  our case, we’re using background colors with photos. We want to make sure that the colors we choose work with the photos as well as the background colors of the site.

I can sample the main colors of the photos and run them through these tools as well. Then I can choose the color options that show up for both sets of colors.

Now, when I get to the place in my CMS where I can choose colors for the element I’m working on, I can choose a compatible theme, or I can customize my colors. Usually, clicking on one of these little color samples will bring up another tool in which you can type the hex code you’ve chosen.

In general, you should choose your light colors to replace light colors in the predetermined scheme, and your dark colors to replace the dark ones. That’s why you wrote them down from light to dark earlier in the process.

This same process will allow you to customize colors at Twitter and similar sites as well, helping you to brand your online presence.