Build Site Color Schemes from Photography

Build Site Color Schemes from Photography

One of the reoccurring responses we received from our reader survey earlier this month involved our color scheme inspiration posts.

Overall, readers seemed to like the palettes, but wanted a demonstration of how to put them into action. Today we’re going to do just that.

By the end of this post we’ll have a website color scheme planned out, along with a wireframe demonstration.

Pick a Base Photo

Flickr is the only site you’ll ever need for inspiration photos. Name a topic, and you’ll have thousands to sift through. Without Flickr, our Color Scheme Inspiration series would have some seriously less inspiring photography.

With so many photos available, you’ll  need to spend some time figuring out the subject matter. Designing for a surf shop? Photos with keywords based on the water is a great start. Travel agency? Sample some beaches around the globe. It sounds obvious because it is.

Let’s put this into practice with a quick search on Flickr. In honor of Halloween, we’ll go with a seasonally themed photo:

Sample a Color Scheme

Most photos have more than a few colors. It’s the job of the designer to figure out which ones will be more significant. Lucky for you, there’s plenty of places online to get help.

Colourlovers has created a great tool called PhotoCOPA. PhotoCOPA allows you to upload a photo into the editor, and then extract colors, add weight to them, and save as exportable palettes. It has been absolutely critical to putting together our Color Scheme Inspiration posts. It’s an easy way of keeping track of the end result when first composing the scheme.

Don’t Be Afraid to Expand

Just because a color doesn’t directly appear in a photograph, doesn’t mean that it can’t be used. This is why it’s called “inspiration” and not “direct extraction”. If a photograph is mostly blue and purples, it’s not inappropriate to include a new shade to enhance the other colors.

Using the Halloween photo above, we can make a number of color schemes:

Plastic_Halloween

Haunted_Toys

Royal_Vampire

PhotoCOPA allows you to search Flickr from directly in the editor, but I’ve found it much easier to sort through photos in typical searches.

Applying to Page Design

There are several tools out there that enable web designers to visualize what the potential end result. Color Scheme Designer is great for generating a quick color scheme with web layout preview. If you’re interested in developing something a little more customizable, I recommend creating a template in Photoshop to plug colors into. Save it somewhere convenient, and save a new version for each scheme.

Once again, don’t be afraid to introduce extra colors as needed. These palettes aren’t always going to look perfect automatically — you will have to do some tweaking to get a good end result.

Sample Layouts

The layouts below are inspired by the color schemes built in the last step. I’ve demonstrated some possible layout colors using our palettes and some basic Photoshop:

Design from Photography

If you find color schemes from other sources, where does your inspiration come from? Have you ever designed a website from a photograph before? Share your experiences in the comments below.

Additional Resources

  1. Color Scheme Designer
  2. PhotoCOPA on Colourlovers

Posted Saturday, October 31st, 2009 · Back to Top

SPONSOR

Add Comment

29 Comments 3 Mentions

  1. Eric B. Author Editor

    Awesome! I’ve always wondered how this was done so nicely.
    .-= Eric B.´s last blog ..Converting a Gimp .xcf to HTML/CSS =-.

    ·

  2. Nicholas Z. Cardot Author Editor

    I’ve seen this done quite a bit and I love it.
    .-= Nicholas Z. Cardot´s last blog ..CSS With Colour: More Than Just Slice & Go =-.

    ·

  3. Dennis Andersson Author Editor

    Just what I wanted! Would be nice to see how the same techniques can be converted to the print industry seeing it’s cmyk, pms blah blah blah, but nevermind that. It’s a web development blog!

    Thanks alot! Good job as always!

    By the way, when will the winner be announced from the survey?

    ·

    • Zach Dunn Author Editor

      @Dennis

      The winners have all been contacted via email. Better luck next time!

      ·

  4. Shawn Bird Author Editor

    Great post! This has changed my life!

    I saw this on the smashing magazine site. Pretty exciting having all those resources together like that.
    Has it helped you traffic?

    ·

  5. Alper Author Editor

    Is there any windows program like PhotoCOPA? Because I don’t want to upload my images to a website..

    ·

  6. Anton Author Editor

    Profilder.com, an under development cross-sites layouts editor, also uses this concept. You choose a background photo / pattern or pick a palette from colourlovers.com then click the “auto-coloring” button to extract the colors and apply the scheme to your layout.

    But if it is easy to match page elements colors it is not that easy to match a text with its background. It is hard to keep it readable. Usually you have to use extra colors.

    I think this technique is very useful and works well with backgrounds, not text.

    ·

  7. Dzinepressd Author Editor

    amazing idea you sharing here. thanks
    .-= Dzinepressd´s last blog ..60+ Creative Ideas about Kitchen Decorations =-.

    ·

  8. Jannis Gerlinger Author Editor

    Very nice. You also can use pages like http://www.colorexplorer.com/ for manage your colorsheme

    ·

  9. Yofie Setiawan Author Editor

    This is a good way to choose a color scheme for a website, usually i do scheme from the color of my client’s logo…

    ·

  10. Web Design Singapore Author Editor

    This is really interesting, building colour schemes from photography. Its the reverse of what we do. Haha from the logo, we derive the colour scheme and based on the concept, we select the photographs.

    Very interesting!

    ·

  11. Melody Author Editor

    Awesome color schemes, understanding how to pull these colors from photos is good practice in color theory..

    ·

  12. El3ments Author Editor

    Nice information about how to use color. Makes me wish I took Computer Publishing instead of Web Page Design.

    ·

  13. Design Informer Author Editor

    Very useful post. BTW, I love the examples.
    .-= Design Informer´s last blog ..Free Under Construction XHTML/CSS Template =-.

    ·

  14. Canvas Photos Author Editor

    I saw a guy use photos of windows to create color palettes. Same concept, but this is really creative. I like it.

    ·

  15. Zach Dunn Author Editor

    @Canvas Photos

    You mean our post from last month?

    http://buildinternet.com/2009/10/color-scheme-inspiration-windows/

    ·

  16. Canvas Photos Author Editor

    Haha. YES. No wonder it was so similar. :)

    ·

  17. Rami Author Editor

    I’m glad i found your website.. if i have to describe it with one word i’d say “brilliant” two words “brilliant, creative” three words “brilliant,creative,amazing”.. you get the idea :P it’s that much how i loved your website after going through the posts…

    anyways, yes i’ve used this method in designing my Joomla based website, i am no where as creative as you guys, but i am trying my best :) best of luck .. and please keep amazing us with new posts.

    ·

  18. jl Author Editor

    very useful, thanks

    ·

  19. Nate Bolt Author Editor

    Sweet article guys. Careful mentioning flickr photos without telling people to search for Creative Commons photos, or use http://compfight.com – you don’t want to encourage people to jack photos that are copyrighted.

    ·

  20. Marie Author Editor

    This is an excellent article. I’ve always had trouble using colour palettes with a site design. This helps. It inspired me to go to Colour Lovers and create some palettes of my own. Thanks!

    ·

  21. nntdesign Author Editor

    its useful to me, thanks !

    ·

  22. Custom Dog Tags Author Editor

    Good post and good info. Please keep it up!

    ·

  23. Bart J. Leger Author Editor

    Great Post! Thanks for your help.

    ·

  24. volkan Author Editor

    good colors

    ·

  25. Diana Eftaiha Author Editor

    thats a really great post. very creative!

    ·

  26. Kreativo123 Author Editor

    U can too add a Chrome or Firefox extension, great post

    ·

  27. Fadi Wahba Author Editor

    Awesome! i like this post :)

    ·

  28. painting melbourne – jamie Author Editor

    What an awesome creative way to work with color, I’m a passionate painter and love color and always looking for inspiration. There are some great photography sites out there that would have great color pallets.

    ·

 

Build Internet by One Mighty Roar. Since 2008.