Design

12 Beautiful Web Design Color Schemes Effortlessly Generated from Real-World Photographs with Adobe Color

by Lou Levit

Nature effortlessly pairs colors together that work. So darn well. The different shades of green on a leaf. The browns in wood grain.

As designers, observing and learning from nature, then, is a powerful tool. We can “borrow” its color combinations to inspire our own designs.

Adobe put out a free tool to help you do that: Color. It’s a mobile app as well as website app that generates color schemes automatically from images you upload.

When I first tried it, I couldn’t believe how easy it was.

Follow the simple steps below to create your own amazing color schemes from beautiful photographs.

1. Find a photograph that evokes the feeling of the brand, person, or company you’re designing a website for.

This photograph can showcase what they do, but it really doesn’t have to. If a picture of a fox in a forest truly evokes the brand of a steel manufacturing company, go for it.

Don’t question those inspiring intuitive sparks that arise when you come across something that you know is right, but just doesn’t make sense to your mind.

2. Once you’ve got your photograph, open Adobe Color.

Upload it using the camera icon in the top right corner, and prepare to be amazed. You’re on the path to an incredible color palette with a click of a button.

3. Adobe color will automatically generate a color palette for you from your photograph. But this isn’t any ol’ color palette.

One of the most powerful features of this app is that your newly acquired color palette is interactive.

Using the panel on the left side, you can select different mood like ‘colorful’, ‘bright’, ‘muted’, ‘deep’, and ‘dark’. This will scan your photograph and adjust the colors to match the selected mood.

My favorite feature, though, is the interactive color picker.

This allows you to move each color marker in your palette on top of your photograph, and see how it changes your palette in real time. This makes honing and refining your color scheme extremely intuitive.

4. You now have a great starting point.

You can work the color scheme into your design and see how it interacts with the other elements. Once you get a feel for the overall harmony of the design, refine and rework as you go.

//

Below, you’ll find some truly stunning photographs with color palettes to match. You’re welcome to use and modify these in any way you’d like, or use the steps above to discover some new ones.

Meditating Fox in Snow

web design color schemes

web design color schemes

Blue-Eyed Portrait

web design color schemes

Mountain Climber

web design color schemes

web design color schemes

Green Morning Dew

web design color schemes

web design color schemes

Bustling City Lights

web design color schemes

web design color schemes

Ocean on Fire

web design color schemes

web design color schemes

Mountain in the Sky

web design color schemes

web design color schemes

Fruit Palette

web design color schemes

web design color schemes

City on Water

web design color schemes

web design color schemes

Spiral

web design color schemes

web design color schemes

Piercing

web design color schemes

web design color schemes

Soothing Earth

web design color schemes

web design color schemes

Discussion

  1. Lou says:

    March 5, 2017

    Test

    1. Lou Levit says:

      March 5, 2017

      Hello!

      1. artdelou@gmail.com says:

        March 5, 2017

        yeah

Join the Conversation

Your email address will not be published. Required fields are marked *

You might also like:

close

Join over 2,000 designers, agencies & entrepeneurs
getting our weekly posts about design & conversions:

Thank you! We look forward
to seeing you around the blog :-)