Picking a Color Scheme for Your Web Site
Although the content that your website has is far more important than the layout and design, the colors on your website can make a difference to visitors who are more likely to stay if your color palette is easy on the eyes. Picking colors that compliment each other is simpler than you think using free online tools that generate color schemes or palettes based on the hex or RGB code of your primary color or an image that you want to use on your site.
For example, a template I’m working on right now has a main container background color of the blue shade like the color swatch on the left. Using the eyedropper tool in my graphics program, I have determined that the hex code is #D6EAFE. Now I’m ready to visit my favorite online tools to choose a nice-looking palette for my template.
As you can see from the image on the right, I have generated a beautiful palette by entering the hex code #D6EAFE at Color Schemer Online. In my opinion, this is the best online tool for generating schemes. I like it because I can lighten or darken the scheme to get many complimentary colors for my project.
Another really cool site is ColorLab.
Here you can learn color theory basics, what colors mean, and color harmony. Their generator creates 7 different schemes: Monochromatic, Analogous, Complementary, Split complementary, Triad, Tetradic 1, and Tetradic 2.
If you don’t like the scheme you’ve generated, you can use their online color picker to select another color and generate more schemes. You can play with this tool until you get the palette you want.
The added bonus on this site is their web page generator. You can change the colors on various elements and when you click submit, a valid XHTML two-column fixed-width template page is created for you. How convenient is that? I think it’s very nice, especially for a newbie web designer.
ColorMatch Redux is another nifty tool that lets you export the generated scheme to an .ACT file for use in Photoshop or Fireworks, an .AI file for Illustrator, or a text file for any other program. Simply adjust the slider or enter the RGB values of your color and you’ll have a nice nine-color scheme.
If you have an image that you want to use on your website, you can upload the image at colr.org, and then select colors or schemes that would compliment your image. This is really handy especially if your image is a main element of your web page.
What’s also neat is that you can create tags for your scheme and save the palette so you can come back any time to re-use your palette.
Let’s say you want a palette that represents a flower. Enter “flower” in the tag search box, and all the palettes tagged as “flower” will load, allowing you to choose one of the existing schemes.
By using any one of the online tools above, your site’s colors will never clash, and you’ve saved yourself a lot of time trying to figure out which colors to use on your project. Now go play with colors! 
PS: How do you select colors for your projects? How likely are you to use the above-reviewed tools?
I look forward to hearing from you!
All the best,
Karen
RSS Entries
October 25th, 2006 at 7:27 am
[…] Karen Blundell schreibt in Ihrem Blog, wie Sie die Farben für Ihre Templates zusammenstellt: “Although the content that your website has is far more important than the layout and design, the colors on your website can make a difference to visitors who are more likely to stay if your color palette is easy on the eyes. Picking colors that compliment each other is simpler than you think using free online tools that generate color schemes or palettes based on the hex or RGB code of your primary color or an image that you want to use on your site.” […]
October 28th, 2006 at 2:04 pm
When I built my site earlier this year I went through all the color tools I could find to try to get help in achieving a good color scheme. Along with the ones Karen mentions, I found various others which I listed in the Open Web Design FAQ.
The most useful programs make attempts to show a mock-up of yourl web site and let you vary the colors, but none of the tools do that well without a lot of extra work. Still, it is worth spending time with some of these programs if only to get a fresh perspective on what we all learned about color in grade school and to see how various combinations might look.
Keep in mind when building a site, however, that there are some good reasons that so many sites use a pretty basic color scheme like blue and white. Also remember that flashy color schemes can generate some very difficult to read text. You don’t want everyone raving about your use of color but being unable to read your content due to eye strain!
-Danny.
October 28th, 2006 at 4:44 pm
There are some very interesting tools listed. Thanks for the links! I’m very colour-challenged, so I generally stick with using many shades of a single colour, or staying with safe combinations like red and white, or grey and maroon, and so on!
Also, always nice to hear someone making the point how content is all-important. I’m primarily a writer by profession, and I’ve quite had it up to here listening to certain people saying how they want a “snazzy site” so the lack of content (in other words, its quality!) won’t be visible!
October 28th, 2006 at 11:17 pm
Thanks Danny and Payal for your comments.
Danny makes a very good point. Quite often I see sites with very dark backgrounds and virtually illegible text because the color contrasts are all wrong. It may seem cool to you but you don’t design your site for just yourself. You must keep your target audience in mind at all times. Most people prefer to read dark text on a light background…it’s so much easier on the eyes whether you have 20/20 vision or not. So I think that’s important to consider.
Payal, in my opinion, without good content, a site is just a shell, like an empty store.
November 5th, 2006 at 11:31 pm
This is really good information for me, because I am not good with colors. When I do design work I am always asking my wife for input on the colors. I will have to bookmark this post.
Thank you for the great information.
November 6th, 2006 at 9:24 am
I’m glad this was useful for you, George.
November 15th, 2006 at 11:23 am
First time to log in and find this information and I am delighted with the colour links… Thank you for all the work you have put into your site Karen.
Best Wishes… Av
November 15th, 2006 at 1:15 pm
you’re very welcome, Av
January 25th, 2007 at 1:33 am
Hello Karen,
Its really late or very early in the morning. LOL
I am seeing a cross eyed. Working on a large pay per listing Holiday Rentals site for a client. I am working on an image map for the front page and needed to look at an over all color plan. Specially when it comes to finishing the map and inserting it into the template. Stumbling upon your site is a really lucky break. I need look no further for colour information.
Many Thnaks…Kind Regards,
John
January 25th, 2007 at 11:09 am
Hi John,
I’m very glad that you benefited from visiting my site. That’s what it’s all about. Good luck with your client project.
all the best,
Karen