Different Methods for Choosing Color Schemes in Web Design

One of the most challenging aspects of design for many web designers is color selection. The color scheme of a site can have a huge impact on the overall look of the site, and it will have an impact on visitors as well. There are a number of different methods that can be used for finding the right color scheme for a particular project, and in this post we will look at several of those methods. Throughout the post you will find links to helpful resources that you may appreciate.

Getting Colors from Existing Marketing Materials

In many situations the client will already have an established color scheme from an existing website or from other marketing materials. In some cases they may want a change, but frequently you will need to work from the established color scheme. Sometimes making slight changes to the shades of colors but sticking with the same basic color scheme can make an impact, and combined with a fresh design of the website it can help to give the company some added interest to their identity.

In situations where you are not working with a client that has an established color scheme, here are some methods that you can try for finding the right one on your own.

Online Color Palette Resources

There are a number of websites and online tools available for selecting color palettes. Many of these sites allow users to upload color palettes that they have put together, and the rest of us benefit by being able to browse through those that have been uploaded. Most of these sites allow you to search or sort the color schemes by a particular hue or by keyword, which can be helpful if you have one color that you want to use but you are looking for others to use with it.

Here is a quick listing of some of the best places to find color palettes.

Adobe Kuler

Adobe Kuler

COLOURlovers

COLOURlovers

ColorSchemer

ColorSchemer

ColoRotate

ColoRotate

Others:

Other online tools exist for helping you to put your own color palette together. Here are some of the best.

Copaso

Copaso

Color Scheme Designer

Color Scheme  Designer

Toucan

Toucan

ColorMunki

ColorMunki

The Color Wizard

The Color  Wizard

Color Explorer

Color  Explorer

Taking Colors from Photographs

Photographs are a great source of color inspiration. You can easily and quickly browse through photos either of your own or random photos from sites like Flickr and deviantART. When you find one that includes a beautiful color scheme, you can upload it to one of several different online tools that will help you to determine the specific colors that are used, providing the hex value so that you can use them in your design work.

Here are some of the best resources of this kind.

ColorSuckr

ColorSuckr

Pictaculous

Pictaculous

What’s Its Color?

What's Its Color?

Others:

At From the Couch David Perel has a nice video tutorial where he goes over his process for choosing colors from a photograph. This is a method that can easily be applied by designers with impressive results.

From the Couch

Design and development blog Build Internet has a series of posts that showcase color schemes from Photographs. Check out their Motivation category to find the color scheme posts.

Build  Internet

Taking Colors from Magazines and Other Printed Materials

Online resources aren’t the only place to find color schemes. Magazines, books, flyers, posters, brochures, cards and any other type of printed material can be another source of color inspiration. You can either find a scheme that you like and try to come close just by eyeballing it, or you can scan it in and take the colors directly from the scan in Photoshop or another program.

Browsing Web Design Galleries

One of the best ways to find color schemes that work well for the web is to browse through design galleries. As you do, you will come across some color schemes that you really like and it may give you some ideas for your own work. Of course, what is good for one site may not work very well for another, so it is a good idea to keep your particular project in mind so you can find some colors that will work well for your situation.

You can search around and take one color from a few different websites, or find a scheme that you like and work with Photoshop to find a similar color scheme that will work for you but will avoid copying the colors of the other site. One of the downsides to this approach is that you can wind up doing more copying than you intend, so be careful to make your scheme unique even if it is inspired by other sites.

Folio Focus

I Like Your Colors is an online tool that allows you to enter a URL, and it will give you the hex value of the colors in use.

I Like Your Colors

Based on Psychology of Colors

One of the factors that should be considered when choosing a color scheme is the psychology of color. There is a great deal of research that has been done over the years to indicate meanings and messages that are associated with various colors. In many cases this will vary from one culture to the next, so be sure that you are paying attention to information that is relevant to your client and their audience.

Here is a list of some online resources and articles regarding the psychology of color.

Nature

Color is everywhere in nature. Step outside, look around, and you are bound to find some inspiring color schemes. Plants, animals, sunsets, color schemes can be found from just about anything in nature. Of course, getting the exact colors and shades isn’t as simple as when you are working with a photograph (although you can always take a picture) or an inspirational website, you can still get many ideas simply from observing nature and the colors that appear.

What’s Your Approach to Choosing Colors?

If you have a method that works well for you, please share in the comments.

Published September 30th, 2009 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

54 Responses

Comments are now closed on this post.

  • Blaine Bullman, October 1, 2009

    A lot of very useful apps, I will be using these in the future for designs I have.

    My favorite part though was the resources and articles regarding the psychology of color, I find the psychology behind colors and why they matter very interesting.

  • aledesign.it, October 1, 2009

    Post really interesting! Psychology of Colors is fantastic! Important for who create a design!

  • Ray Wenderlich, October 1, 2009

    Thanks for the list of resources, some of these I was not aware of!

  • Harsha M V, October 1, 2009

    thanx a lot. very usefull.

  • Mark Carter, October 1, 2009

    Great set of resources .. many thanks for sharing them.

  • zebra bedding, October 1, 2009

    My zebra scheme is pretty straight forward black and white :-)

  • Sharon, October 1, 2009

    Thanks for all the resources. I thought colors are just colors. Didn’t realize there is so much more beyond colors. Very interesting and will try it on my sites.

  • Improve Your Vertical, October 1, 2009

    Ok, wow! I had heard about Adobe Kuler and was going to look into it a bit more for some of my sites and businesses, but now it looks like I have a whole afternoon booked going through some of these additional links I had no idea about!

    Very thorough list here!

  • http://www.aionkinah.us, October 2, 2009

    thanx a lot. very usefull.

  • cheap aion kinah, October 2, 2009

    Post really interesting! Psychology of Colors is fantastic! Important for who create a design!

  • Arif Kayan, October 2, 2009

    Colors are very nice mechanism did not expect that much ..Thank you.!

  • James J Martin IV, October 2, 2009

    Great stuff! Lots of good info.

  • Don Elliott, October 3, 2009

    Very useful. I love that CS4 has Kuler integrated within the program.

  • Ira Mann, October 3, 2009

    Wow! This is an amazing list of useful apps. It will take a little while to check them all out, but I looking forward to seeing everything they have to offer. Thanks for the Great Post!!

  • Web Templates, October 3, 2009

    Its interesting to see how few follow the “psychology of color”. People gravitate toward certain colors for different reasons.

  • aledesign.it, October 4, 2009

    I think this very interesting post. It ‘important for any web designer to have a correct color table, the user will be interested in the site thanks to the colors.

  • Dan @ cash earn online, October 5, 2009

    That 3-d one was awesome! That’s just impressive, right?! The look itself, while seeming like it would be harder to use, could really impress clients. I mean, they won’t know what you’re using!

    I love it!

    I just do some small stuff on the side but I’m going to look into it and see exactly how it works and what the cost is.

    Thanks

  • Jerry, October 6, 2009

    Great article. There are so many color resources out there. It’s almost overwhelming. I read an article (can’t remember where) that said people, women in particular, dislike web design schemes where purple is the primary color. Now I have a client who just sent me a new logo to use in her redesign job and it is purple. And her users are probably 75% female. I felt compelled to mention that she might want to think twice about making purple her primary color. Does anyone recall the recent article that referenced the women & purple thing???

  • Richard, October 8, 2009

    I have been looking for information about the methods used to find the right color scheme for a particular project.
    You write very great.Thanks!

  • Webdesign, October 13, 2009

    Really interesting article…..

    It’s very helpful to us !

  • Etiketten, October 17, 2009

    Thx for the color picker list. its very usefull!

  • Rishka, October 27, 2009

    Thank you for the article, I just last week used the ColorSchemer to get my colors.. Wish I had seen your blog before, I cetainly would have had a greater selection in resources.. Now I need a logo designed!

  • while designing my site http://www.shopfordesigns.com I was just looking for such tools. Great article.

  • Judy, July 11, 2010

    This is very important. I admit that if the colors are not right for me, I leave the page without giving it a chance. Teaching people what colors will help get more traffic to stay on their pages longer.

  • Mark, July 21, 2010

    Very good point. I use mostly white backgrounds, but I do like using different colors in my texts, as well as, my self generated ads and banners. Very good post!

  • Jeff, July 24, 2010

    I like to think that all colors make a difference. Dark colors have their good points and soft colors have theirs. I use every source that I can get my hands on and I even make up some. I like to be creative.

  • Mathew, August 3, 2010

    I have found that your designs have helped me out. I like the new design that I have made. I think that eveyone else does, too because they are staying longer on my pages. Thanks.

  • Donna, August 10, 2010

    Color is the best way to get and keep your traffic coming to your site. If, the customer likes what he/she sees, then they will return or stay on the page longer. I also, think that the font size helps to keep cutomers on the site longer. When the print is, too small or, too busy, this will keep them jumping. Great info.

  • Jessy, September 5, 2010

    You always have wonderful, neat ideas. I do not know what I would do if, I could not follow what you have suggested. I love the colors and contrast that you show. You make me look good.

  • Michael Lessing, April 19, 2011

    When designing websites, picking the color scheme has always seemed to take me a while. I usually try to remember what I learned about color theory from my art classes (e.g. two colors that are opposite each other on the color wheel form the most harmonious combinations). These color palette resources are very helpful. Thanks for the helpful reviews. I’ll give some of these a try. One that I’ve recently found that could be added to this list is an online application is called Color Scheme Generator (http://www.colorschemetools.net/colorschemegenerator). It seems like all of these applications can save me tons of time!

  • Ammy Jackson, September 23, 2011

    Wow, What a marvelous things about colors. Really very interesting and extremely useful for web designers. All the resources are simply fabulous.
    Thanks a lot for great article.

  • Daniel, December 25, 2011

    Damn,

    I read it

    I understand it

    But the power of awesome color still eludes me =(

    I remain just a hack developer. I keep trying.

    Thanks for help =)

  • hamza dar, April 8, 2013

    This is very nice and fantastic tool for designing for creative people.thank you so much……