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:
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.
Discussion
October 31st, 2009 at 4:10 PM
Awesome! I’ve always wondered how this was done so nicely.
.-= Eric B.´s last blog ..Converting a Gimp .xcf to HTML/CSS =-.
November 1st, 2009 at 2:34 AM
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 =-.
November 1st, 2009 at 8:05 AM
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?
November 1st, 2009 at 11:33 AM
@Dennis
The winners have all been contacted via email. Better luck next time!
November 1st, 2009 at 12:31 PM
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?
November 1st, 2009 at 5:15 PM
Is there any windows program like PhotoCOPA? Because I don’t want to upload my images to a website..
November 1st, 2009 at 6:03 PM
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.
November 2nd, 2009 at 8:10 AM
amazing idea you sharing here. thanks
.-= Dzinepressd´s last blog ..60+ Creative Ideas about Kitchen Decorations =-.
November 2nd, 2009 at 9:10 AM
Very nice. You also can use pages like http://www.colorexplorer.com/ for manage your colorsheme
November 2nd, 2009 at 9:28 AM
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…
November 2nd, 2009 at 10:10 AM
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!
November 2nd, 2009 at 4:19 PM
Awesome color schemes, understanding how to pull these colors from photos is good practice in color theory..
November 2nd, 2009 at 6:07 PM
Nice information about how to use color. Makes me wish I took Computer Publishing instead of Web Page Design.
November 2nd, 2009 at 10:04 PM
Very useful post. BTW, I love the examples.
.-= Design Informer´s last blog ..Free Under Construction XHTML/CSS Template =-.
November 18th, 2009 at 12:10 PM
I saw a guy use photos of windows to create color palettes. Same concept, but this is really creative. I like it.
November 18th, 2009 at 11:10 PM
@Canvas Photos
You mean our post from last month?
http://buildinternet.com/2009/10/color-scheme-inspiration-windows/
November 19th, 2009 at 11:20 AM
Haha. YES. No wonder it was so similar.
November 20th, 2009 at 1:53 AM
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
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.
November 22nd, 2009 at 7:45 PM
very useful, thanks
November 28th, 2009 at 1:47 PM
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.
February 12th, 2010 at 2:21 PM
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!
March 6th, 2010 at 3:03 AM
its useful to me, thanks !
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.