Whorled View

January 7, 2009

Think your web colors are okay?

Filed under: programming,Technology — lullabyman @ 10:48 pm

Sometimes you think you have a great website design, and well … a couple tweaks from an outside opinion can make a world of difference.

Take this website for example: www.probertson.com

For demonstration purposes I hope the author hasn’t changed it (I told him it was problematic, and he said he was too busy to take 60 seconds to modify his CSS file to fix it).

The website looks great really from a formalist standpoint.  From a purely aesthetic perspective I love his rich invigorating blue background (color: #000044) .  From a functionalist standpoint I find it painful.

Fully saturated backgrounds are just plain bad despite how beautiful and invigorating they may be, unless they’re very very dark (#000027) or very very light (#FFFFE3).  Saturated colors are indeed beautiful and invigorating but when entire backgrounds are beautiful and invigorating they distract from the content.  Don’t get me wrong here.  I’m all for fully saturated colors in sidebars, icons, borders, titles, Header images, Header backgrounds, etc, but it’s hard to read content when it’s smothered in an invigorating background color.  When it comes to text backgrounds dull is good, interesting (saturated or any texture beyond barely perceptible) is bad.  Of course, there’s an exception (isn’t there always) if the text background is in a small windowed box … but never for large amounts of text … the main course of a typical website.

Add to that his gray text color … and again it looks attractive but after reading his content for a minute (and he has great content) well … I want to claw my eyes out.

A couple tweaks in Paint Shop Pro and this is what I get:

attractive vs. professional and freindly

attractive vs. professional and friendly

Which image is more aesthetically pleasing is a matter of opinion.  I think most web designers would agree however that interesting backgrounds (color-wise or texture wise), while attractive, give websites an amateur look and feel.  You’ll never see professional websites where content competes with the background it overlays.  That”s why the version on the right intuitively looks more professional to most people.  That’s not to say professional websites have to look boring (take the americanexpress website – both attractive and professional and one of the best looking websites in existence imho) … but if you want to add pizazz, don’t do it with a distracting text background for large amounts of text (again -small text-boxes are an exception becuase there is less text to focus on, whereas when there is a lot of text to focus on the reader must be able to have no underlaying distractions).

If you don’t know how to tweak colors like this or don’t have the tools, and don’t know how to change the colors on your website either don’t fret.  Irfanview is a free program that allows you to easily tweak the colors of an image.  Print-screen your website (you probably have a key that says PrtScr), paste the contents into irfanview (start  Irfanview and then click CTRL-V) and then click Shift-G to tweak the colors.  When you get the image the colors you like save it and send the image to your website designer (or your neighborhood geek) and they’ll match or help you match the new colors.


Create a free website or blog at WordPress.com.