LearnQuick Tip: Experimenting with Color for Web Layouts


writes on March 14, 2011

During our Q&A sessions, one question that pops up a lot is how to pick colors for a website. Participants in chat often cite Kuler as a resource, a great little site of preset color scheme from Adobe. We also offer a free video through Think Vitamin Membership that discusses color mixing as part of a series on color theory, and there are sites like Color Scheme Designer that make color theory easy by generating schemes based on your selections. My own method usually involves some combination of color theory and experimenting with eyedropped samples from harmoniously-colored photos or images.

Once I’ve come up with an acceptable color scheme, it almost always takes some experimentation to find the final combination. My favorite way to do this is to stick the layout in Photoshop, create a new layer above the layout, and fill it with color. I usually start with a brown or blue, then change the color and blending modes to see alternate color schemes.

Here’s an example of this with the Carsonified website, showing the color layers and blending modes I used.

Blending Modes Example

One great thing about this method is that it works really well on grayscale layouts with splashes of color, which is how a lot of my designs begin. (Supplementary tip: looking at your layouts in grayscale is an awesome way to verify you have sufficient contrast.) Here’s a case where I used it on a website background that was mostly gray. Adding in that “experimentation” layer amped up the richness considerably:

Blending Modes Example

This little procedure always helps me out when I’m suffering color block, so I hope it will help you too! Next time you’re struggling to find the right colors, give this method a shot. 🙂



Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

5 Responses to “Quick Tip: Experimenting with Color for Web Layouts”

  1. Jen Greenley on March 21, 2011 at 3:15 pm said:

    Fantastic tip. Been using the grayscale practice for years as more of an accessibility tactic for color blindness. I always wanted to make sure I had enough contrast going. I taught my high school web design students to do this as a best practice 🙂

  2. Anonymous on March 15, 2011 at 12:52 pm said:

    If you work with windows, you should drop an eye of DotColor 3.0:


    It looks like an normal freeware color picker, but the software has has a builtin color mixer. The color mixer shows a screenshot of your working screen. If you activate it, you can select a color of the screen and change it and see the results in time.

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop