Using a “Done-for-You” Color Scheme from Adobe Color to Create a Web Design Mockup… In 12 Minutes.

by David Tendrich

image loading - reliable - how psd to html and wordpress should be

One of the most challenging things for me in design is coming up with the right color combinations. But if you have a picture that perfectly expresses your client’s brand… chances are the colors in that picture play a big factor.

So, like in the last post, you can quickly create a website mockup based around that photo using Adobe Color. (By the way… I swear I’m not an affiliate of them… I just really love this app lol.)

Here are the steps I took to make a pretty cool mockup in about 12 minutes with a solid color scheme.

First, I generated the color scheme in the Color web app and chose the “muted” preset because it seemed to fit best.

Next, I wanted to place a headline / sub-headline on top of the image, so I took the light blue, made a darker shade from it, then put a transparent overlay on the image.

Then, I placed some text on top of the overlay, and used many of the other colors to form my color scheme for the site. I took some elements from the logo to brand it a bit more too. Otherwise, everything was pretty standard in terms of setting up my hero section:

As you can see, the makings of a real website are here. And one of the most difficult parts – the color scheme – was done for me.

Pretty cool, right? 🙂

Obviously this design has a long way to go! (I only spent 12 or so minutes on it.) But because I didn’t have to think so much about color, it freed me up to get all of the content placed which I can now massage and refine with more creativity.

Till next time,

David, from Reliable.

P.S. If you got a lot out of this post, I’d appreciate if you shared it with those bright social buttons below 😉 Thanks


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 :-)