Vandelay Website Design Blog

Color Schemes from Photographs

Earlier this week I posted a gallery of colorful websites. Today I’d like to take a look at a few online tools that can help you to generate a color scheme for your website by taking the colors from a photograph. When designing a new website, color inspiration can come from just about anywhere. Photographs can often be an effective source of color inspiration, and if you find this to be the case for your designs, there are some tools that can help even more.

What’s Its Color is a simple online tool that will analyze a photograph and provide you with the html numbers for the main colors that appear in the photo. You can either upload an image from your compter, or you can give the URL of a photo online.

Let’s take a look at a few examples.

By uploading this picture, I get the the color scheme shown below.

Flower

Colors

And from this picture, I get the colors shown below.

Book

Colors

There are some other similar tools, including the Color Palette Generator at DeGraeve.com and the Color Palette Generator at JRM.cc.

Another useful tool is I Like Your Colors. Have you seen another website that uses a color scheme tht you especially like? With I Like Your Colors you can enter the URL of a page and it will show you the html numbers of the colors that are used on the page (by scanning the html and css code). Of course, you won’t want to copy the color schemes of other sites, but this can be a good tool for inspiration and for getting started. Let’s look at an example. When I enter the URL for Web Designer Wall (screen shot below), I Like Your Colors produces the following report (screen shot further below).

Web Designer Wall

Colors

What other tools and resources do you find to be useful when developing color schemes?

Originally Published February 7th, 2008

7 comments from readers

  • 1 Dave Walker Feb 7, 2008 at 8:37 pm

    Basing colour schemes around photos is a great technique, and excellent if you ever have to matte and frame prints, paintings or photos.

    It’s not a colour generator, but for a huge range of palettes (and a really good colour community), you can’t beat colourLOVERS.com.

    (BTW, like Joost, I noticed a trend towards blues and greens of the outdoors in your last post too :D )

    Steven, take a ‘boo at http://www.blueplanetwedding.com and tell me what you think

  • 2 Madhur Kapoor Feb 8, 2008 at 10:14 am

    The tool is great. Useful when finding a particular color code from a photograph

  • 3 Vandelay Design Feb 9, 2008 at 7:30 am

    Dave,
    Yes, I’ve used Colourlovers before and I really like it. The Blue Planet Wedding Site looks nice. Is that a recent project of yours?

    Madhur,
    Glad you like it.

  • 4 Dave Walker Feb 10, 2008 at 11:22 am

    Yeah, it’s a side business right now; hopefully it’ll become my main business soon. It’s amazing how many different design iterations it went through before I landed here. It might not be perfect, but at least I can look at it every day (and isn’t that what all designers are really aiming for? :D ).

  • 5 king Feb 14, 2008 at 8:22 am

    I use illustrator. I place a picture. I use “live trace with 4-5 colors.”

  • 6 Vandelay Design Feb 14, 2008 at 4:20 pm

    That’s another good method too. Thanks for the feedback.

  • 7 moneyblog » Color Schemes from Photographs Feb 16, 2008 at 8:49 am

    […] Source from: Vandelay Design […]