Good design is one of those things that when it’s right, you might not notice but, when it’s wrong, there’s no hiding it. One of the easiest ways I’ve found to create good design is by getting the color scheme right and my favorite way to nail it every time is with Colr.org.
Color sets the mood, carries the theme and can convey ideas. When a website’s elements such as links, tables and mast-head images all work together, the other elements of the design seem to fall into place. After all, it’s much easier to see when a table is too wide than it is to put your finger on just 1 of the more than 16 million colors represented in hexadecimal.
With the help of Colr.org I only have to find a picture that represents the idea I’m trying to convey. Once I have it, the site’s software allows me to load it and sample it’s colors.
I’ve used this technique for everything from client websites, to matching the tables and links in my Twitter profile to a custom background image.
The “right” picture is one of those intangible things that I can’t really help you find, but I like to start with a short list of adjectives to help me focus my search. Peaceful, happy, warm, bright, or any number of words that might describe the mood or theme of the design. From there I just go with an image that I like the best.
For this post I chose “Lobster Adirondack Chairs” by cbgrfx123 on Flickr because it had an Attribution Share-a-like license and could use it, here, and in the example to the left, without running afoul of someone’s copyright.
But if all you need are colors that work well together, and won’t be displaying the picture publicly, it’s fine to use any image you want.
My suggestion is, if you’ve never used Colr.org’s software, pop over to the site and start playing around with some of the features by using one of the random Flickr images on the home page. There’s a very handy button allowing you to load other, random images in case the ones on display don’t float your boat.
The button I use most is “Pick a Scheme from image” since that will auto generate a scheme with 3 or more colors taken from the image.
The “Edit Scheme” box is handy too. With the features found there, you can delete a color you don’t like, add a new one with the + or get the hex so that you can add the colors to a template. There’s even a feature that allows you to find paint by brand name in case you’re designs are for a physical space.
If you’d rather pick your colors on your own, simply hover your mouse over one of the 3 pictures on the Colr.org home page and click into any one of the colored boxes to find out more about it.
Colr.org also has a very handy how-to page for help using the site’s features.
Once you have some colors that you think will work well on your site, don’t be afraid to move them around in your template. My first instinct isn’t always right when it comes to backgrounds and readability. It’s perfectly acceptable to switch things around or go back to your picture and find a new color or two to substitute if things just aren’t right yet.
If colr.org can make me look like a design professional, I’m sure it can help you too.